當想要分享小程序的介紹卡片時，往往會需要將圖片保存下來并分享。

但是，在開發時，二維碼的圖片是不固定的，往往需要將兩張甚至兩張以上的圖片拼接到一起進行保存。如下圖，就是由背景圖和二維碼拼接到一起的圖片效果：

?當通過設置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实现附有二维码的图片的本地保存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。