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

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

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

1. HTML部分

<view class="img-box-top">
	<view class="img-left">
		<canvas canvas-id="imgCanvas" style="width: 100%;height: 100%;">
			<view class="canvas-text"></view>
		</canvas>
	</view>
	<view class="img-right">
		<button class="cu-btn bg-green shadow" @tap="generate">生成图片</button>
	</view>
</view>

2. 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)
   		})
   	}
},

2. 预览
   编译之后就是这个熊样子啦,知识简单的canvas画图，谈不上画图，画字，希望对你有帮助

#-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#生成的