uniapp小程序canvas生成图片

最新推荐文章于 2024-07-11 14:17:48 发布

nahc

最新推荐文章于 2024-07-11 14:17:48 发布

阅读量1.4k

点赞数 1

文章标签： uni-app 小程序

本文链接：https://blog.csdn.net/qq_44184452/article/details/133302052

版权

文章描述了在H5小程序中，如何利用CanvasAPI创建一个带有二维码和文字的图片，并通过`uni.canvasToTempFilePath`方法将其保存到相册的过程。开发者展示了代码实现，包括获取Canvas上下文、绘制图形和调用API进行文件路径转换。

摘要由CSDN通过智能技术生成

需求分析

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

效果展示

在这里插入图片描述

控制台打印生成图片链接。
在这里插入图片描述

在这里插入图片描述

代码实现

<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画布外添加父元素，让画布不可见

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
			)
		}
	}