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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值