uniapp小程序canvas生成图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序canvas生成图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求分析

点击页面分享按钮时候，跳出弹出层，css完成页面，点击弹出层的保存到相册，能生成canvas画布，然后变为图片。

效果展示

小程序uni-app将html+css生成图片,uni-app,小程序

控制台打印生成图片链接。
小程序uni-app将html+css生成图片,uni-app,小程序

小程序uni-app将html+css生成图片,uni-app,小程序

代码实现

<view class="card">
	。。。省略
	<view class="close" @click="save">保存到相册</view>
</view>
<view style="width: 0px; height: 0px; overflow: hidden">
	//让父标签 0宽 0高 隐藏溢出
	<canvas canvas-id="myCanvas" :style="{ width: '375px', height: '560px' }"></canvas>
</view>

在canvas画布外添加父元素，让画布不可见文章来源地址https://www.toymoban.com/news/detail-843669.html

methods: {
		open() {
			// 获取 Canvas 组件的上下文对象
			const ctx = uni.createCanvasContext('myCanvas', this)
			//蓝色底色
			ctx.beginPath()
			ctx.rect(0, 0, 375, 560)
			ctx.setFillStyle('#4678ff')
			ctx.fill()
			
			// 二维码部分白底
			ctx.beginPath()
			ctx.rect(10, 340, 355, 210)
			ctx.setFillStyle('#ffffff')
			ctx.fill()

			//文字
			ctx.setFontSize(20)
			ctx.setFillStyle('#ffffff')

			ctx.setTextAlign('center')// 文字在设定的x位置居中
			ctx.setTextBaseline('bottom') //文字在设定的y轴线 靠下
			
			ctx.fillText(`${this.time[0]}-${this.time[1]}`, 187, 110)
			ctx.fillText(`${this.area}积分榜 荣获`, 187, 140)

			ctx.fillText('第', 160, 300)
			ctx.setFontSize(40)
			ctx.fillText('0', 185, 310)
			ctx.setFontSize(20)
			ctx.fillText('名', 210, 300)

			
			ctx.setFillStyle('black')
			// 获取文字长度
			const fontWidth = ctx.measureText(this.userInfo.name)
			ctx.setTextBaseline('middle')
			ctx.drawImage(this.userInfo.pic,157 - fontWidth.width / 2, 350, 60, 60)
			ctx.setTextAlign('left')
			ctx.fillText(this.userInfo.name, 187 + fontWidth.width / 2, 380)

			ctx.setFillStyle('#707070')
			ctx.setTextAlign('center')
			ctx.setFontSize(15)
			ctx.setTextBaseline('bottom')
			ctx.fillText('骑行里程0.00千米', 187, 440)
			ctx.drawImage('/static/images/othericons/客服二维码.png', 265, 460, 80, 80)
			ctx.draw()
		},
		save() {
			this.open()
			uni.canvasToTempFilePath(
				{
					x: 0,
					y: 0,
					width: 375,
					height: 560,
					canvasId: 'myCanvas',
					success: function (res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log(res.tempFilePath)
						uni.showToast({
							icon: 'success',
							title: '保存成功！'
						})
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							icon: 'error',
							title: '保存失败！'
						})
					}
				},
				this
			)
		}
	}