<!-- 海報 --> <view class="cardArray" :class="canvasrShow?' ':'cardArray2'" catchtouchmove="true"><image class="close-ico" :src="getimg('poster_close.png')" @click="closeShare()"></image><canvas style="width: 260px; height: 460px;" canvas-id="firstCanvas1"></canvas> </view> // 保存圖片goPoster() {// #ifdef H5 uni.canvasToTempFilePath({canvasId: 'firstCanvas1',success: (res) => {//把base64轉換成Blob數據uni.downloadFile({url: res.tempFilePath,success: (res) => {// console.log(res);//創建一個a標簽var link = document.createElement('a');//把a標簽的href屬性賦值到生成好了的urllink.href = res.tempFilePath;//通過a標簽的download屬性修改下載圖片的名字link.download = '分享海報.png';//讓a標簽的click函數，直接下載圖片link.click();}})},fail: function(err) {}})// #endif// #ifdef MP || APP-PLUSuni.canvasToTempFilePath({canvasId: 'firstCanvas1',success: (res) => {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success() {uni.showModal({title: "保存成功",content: "圖片已成功保存到相冊，快去分享到您的圈子吧",showCancel: false})}})},fail: function(err) {}})// #endif},

總結

以上是生活随笔為你收集整理的uniapp 实现小程序，h5保存海报图片的全部內容，希望文章能夠幫你解決所遇到的問題。

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