当想要分享小程序的介绍卡片时,往往会需要将图片保存下来并分享。
但是,在开发时,二维码的图片是不固定的,往往需要将两张甚至两张以上的图片拼接到一起进行保存。如下图,就是由背景图和二维码拼接到一起的图片效果:
当通过设置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"
});
}
});
}
})
}
然后便可以实现长按图片下载拼接后的图片的效果了。
希望本文会对您有所帮助^_^