uniapp实现附有二维码的图片的本地保存

当想要分享小程序的介绍卡片时，往往会需要将图片保存下来并分享。

但是，在开发时，二维码的图片是不固定的，往往需要将两张甚至两张以上的图片拼接到一起进行保存。如下图，就是由背景图和二维码拼接到一起的图片效果：

当通过设置show-menu-by-longpress来保存图片时：

<image show-menu-by-longpress @longtap="chkit" src="https://img0.baidu.com/it/u=2108274043,4161636619&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=360">

仅仅会将背景图保存下来，上层的二维码覆盖物无法保存成功。

因此主要的解决方案就是将两张图片合二为一，我首先想到的就是利用canvas将两张图片绘制到一起。

流程：

1.首先先在页面上定义一个canvas标签，用于绘制拼接后的图片。需指定一个canvas-id，后期会用它来生成临时的图片路径，以便图片保存。

<canvas class='canvas-poster' canvas-id='myCanvas'></canvas>

2.定义方法来绘制两者图片到一起（两张图片使用临时的代替了）：

//绘制图像
function viewDrawToCanvas() {
    //通过uni.downloadFile对绘制方法进行包裹，加载成功后才开始绘制
	uni.downloadFile({
		url: "https://img0.baidu.com/it/u=2108274043,4161636619&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=360",
		success(res) {
            //获取到目标Canvas对象
			const ctx = wx.createCanvasContext('myCanvas')
			ctx.drawImage(res.tempFilePath, 0, 0, uni.upx2px(900), uni.upx2px(456))
            
            //使用同样的方法绘制第二张
			uni.downloadFile({
				url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fupload-images.jianshu.io%2Fupload_images%2F20446980-56f681094c41bfe6.jpeg&refer=http%3A%2F%2Fupload-images.jianshu.io&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664431859&t=8fa0744e59d6d892c4edc6037aa38e6b",
				success(res) {
					ctx.drawImage(res.tempFilePath, 0, 0, uni.upx2px(300), uni.upx2px(150))
					imgurl.value = res.tempFilePath
                    //这个一定要写
					ctx.draw(true)
				}
			})
			ctx.draw()
		}
	})
}

3.在生命周期中调用第2部声明的绘制方法，确保图片绘制成功。

//这里笔者使用的vue3钩子函数，仅供参考
onMounted(() => {
	viewDrawToCanvas()
})

这样拼接后的图片就显示在页面上了，接下来就是图片的长按保存了。

4.使用标签包裹第1步的canvas标签，并使用longtap（长按交互）绑定事件

<view @longtap="chkit" style="display: inline-block;">
	<canvas class='canvas-poster' canvas-id='myCanvas'></canvas>
</view>

5.在触发的事件中通过wx.canvasToTempFilePath传入canvas-id获取临时的图片路径，并使用uni.saveImageToPhotosAlbum保存图片。

function chkit() {
	wx.canvasToTempFilePath({
        //传入canvas标签上定义的canvas-id,解析图片内容，供后续使用
		canvasId: 'myCanvas',
		success: function(res) {

			uni.saveImageToPhotosAlbum({
                //传入解析后的图片数据，并在用户同意授权后将其保存到相册中
				filePath: res.tempFilePath,
				success: () => {
					uni.showToast({
						title: '保存成功',
						duration: 2000
					});
				},
				fail: () => {
					uni.showToast({
						title: '保存失败',
						duration: 2000,
						icon: "none"
					});
				}
			});
		}
	})
}

然后便可以实现长按图片下载拼接后的图片的效果了。

希望本文会对您有所帮助^_^

uniapp实现附有二维码的图片的本地保存

猜你喜欢