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实现附有二维码的图片的本地保存相关推荐

uniapp 画布绘制二维码,图片,文字的方法
uniapp 画布绘制二维码创建canvas标签 canvas属性获取canvas上下文开始绘制画图片本地图片网络图片渐变色画背景图创建一个渐变色线性对象画文字画二维码坑点最近 ...
Atitit java 二维码识别图片识别
Atitit java 二维码识别图片识别 1.1. 解码1 1.2. 首先,我们先说一下二维码一共有40个尺寸.官方叫版本Version.1 1.3. 二维码的样例:2 1.4. 定位图案2 1. ...
小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）
(这个有问题,最近会把整理后的更新上去!!!!!!) 最新最新!!!:https://blog.csdn.net/zuorishu/article/details/88632978 需求背景: 分享图 ...
利用canvas把二维码和图片合成海报
思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成 ...
对#Hello，2015征文#+Android 热敏打印机打印二维码（图片）博客的尝试
原博客链接 #Hello,2015征文#+Android 热敏打印机打印二维码昨天晚上说抽时间来写一篇关于Android 热敏打印机打印二维码和图片的文章,所幸在下班之前把它给写了,和大家分享吧.我 ...
简单的二维码生成接口,自动生成二维码,返回图片地址
自动生成二维码,返回图片地址本来不想写的,但是怕太久不写这个东西,就要荒废了,就先记录一下简单的东西这里因为,返回地址的时候,通过了nginx ,我试了很多方法都抓取不到对应的IP地址, 就在ng ...
myqr一句代码实现二维码背景图片自定义装逼指南
myqr一句代码实现二维码背景图片自定义装逼指南文章目录 myqr一句代码实现二维码背景图片自定义装逼指南前提准备步骤注意拓展示例前提准备 1.Python安装(下载安装教程自行查阅). ...
Vue.js结合Canvas制作二维码和图片的合成（html2canvas + Canvas2Image）--整理
之前写过一篇关于二维码和图片合成的博文,但是存在一些问题,本篇是本人整理最后在项目中使用的. 建议:如果是单张背景图或者是多张背景图且二维码在同一位置的话,建议直接在后台合成分享图直接给前端返回即可, ...

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

uniapp实现附有二维码的图片的本地保存相关推荐

最新文章

热门文章