UniApp 页面输入内容canvas生成图片保存本地

2024-07-13 08:54| 来源: 网络整理| 查看: 265

需求：页面输入内容，点击生成图片按钮，利用canvas绘制出一张图片并且保存下来。

HTML部分生成图片 Js部分 generate() { //shangbiao_text为输入的内容 if(!this.shangbiao_text){ uni.showToast({ title:'请输入商标名称' }) }else{ this.canvas_text = this.shangbiao_text; const ctx = uni.createCanvasContext('imgCanvas'); ctx.font = 'bold 18rpx serif' ctx.setTextAlign('center') ctx.setFillStyle("#000000") ctx.fillText(this.canvas_text, this.windowWidth * 0.55 / 2, 60, this.windowWidth * 0.55) ctx.draw(true, () => { setTimeout(function() { uni.canvasToTempFilePath({ canvasId: 'imgCanvas', fileType: 'jpg', x: 0, y: 0, width: this.windowWidth * 0.6, height: 100, destWidth: this.windowWidth * 0.6, height: 100, success: function(res) { console.log(res.tempFilePath) this.imgPath = res.tempFilePath return console.log(this.imgPath) // 在这里保存图片 }, fail: function(error) { console.log(error) }, }) }, 100) }) } }, 预览编译之后就是这个熊样子啦,知识简单的canvas画图，谈不上画图，画字，希望对你有帮助

在这里插入图片描述 #------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 在这里插入图片描述 #生成的

【本文地址】

公司简介

联系我们