uniapp实现附有二维码的图片的本地保存
生活随笔
收集整理的這篇文章主要介紹了
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实现附有二维码的图片的本地保存的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 自动驾驶数据集综述
- 下一篇: 树上战争 HDU-2545