跨平台应用开发进阶 (五十三)：uni-app 通过 webview 方式嵌套 H5 实现图片点击下载

2023-04-22
上海
本文字数：1785 字
阅读完需：约 6 分钟

一、前言

在项目开发过程中，遇到 uni-app 通过 webview 嵌套 H5 项目，实现 H5 中图片点击下载的需求。

二、实现方案

实现思路：需要用到Bitmap，把base64转成bitmap文件对象，保存到系统相册（但是此时某些手机上无法显示出来，其实是保存成功的），然后使用plus.gallery.save方法将图片保存到系统相册中。

Bitmap是原生图片对象，其有个方法是loadBase64Data；于是首先创建一个bitmap对象;
然后使用loadBase64Data将base64字符串转换为bitmap文件对象;
调用bimap.save方法，将图片文件存入手机存储（记得bitmap.clear()，比较占内存）;
应用plus.gallery.save方法将图片成功保存并显示；

点击分享按钮时，将图片转换为 base64 格式。

signShare() {    this.toImage();},toImage() {   Toast.loading();   const node = this.$refs.luckyInfo;   htmlToImage(node, 2).then(img => {       this.shareObject.image = img;       // launchSharePanelPic(this.shareObject);// 展示海报this.showPicNewyear(this.shareObject.image, this.shareObject.title);       // this.goPage();       Toast.hide();   }).catch(err => {       console.log(err);       Toast.hide();   })},

复制代码

其中，htmlToImage为利用html2canvas方法将页面html转换为base64。

// 利用html2canvas将页面html转换为base64export function htmlToImage(node, ratio = 16/9) {    // 获取像素比    const scale = getDPR();    let  canvasOptions = document.createElement("canvas");     canvasOptions.width = window.innerWidth * scale;    canvasOptions.height = window.innerWidth * ratio * scale;
    return new Promise((resolve, reject) => {        html2canvas(node, {            canvas: canvasOptions        }).then(canvas => {            let dataUrl = canvas.toDataURL("image/png");            const image = dataUrl.replace(/^.+?base64,/, "");            resolve(image);        }).catch(err => {            reject(err);        });    })}

复制代码

其中，luckyInfo为待保存图片区域。

<div class="pic-bg"    :style="`background-image: url(${bgUrlBase64})`"        ref="luckyInfo">            <slot name="bg"></slot>          <slot name="userInfo"></slot>      <slot name="barcode"></slot></div>

复制代码

点击预览图片后，触发保存事件：

saveImgFile() {  const bitmap = new plus.nativeObj.Bitmap("test");  bitmap.loadBase64Data(this.footerUrlBase64, function() {    const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式    // uni.showToast({    //   title: 'saveHeadImgFile:' + url,    //   icon: 'none'    // })    bitmap.save(url, {      overwrite: true,  // 是否覆盖      // quality: 'quality'  // 图片清晰度    }, (i) => {      // uni.showToast({      //   title: '成功回调函数:' + JSON.stringify(i),      //   icon: 'none'      // })      plus.gallery.save(i.target, function() {          uni.showToast({            title: '图片保存至相册成功',            icon: 'none'          })          bitmap.clear()        },        function(e) {          uni.showToast({            title: '图片保存至相册失败:' + JSON.stringify(e),            icon: 'none'          })          bitmap.clear()        },      );    }, (e) => {      uni.showToast({        title: '图片保存失败1:' + JSON.stringify(e),        icon: 'none'      })      bitmap.clear()    });  }, (e) => {    uni.showToast({      title: '图片保存失败2:' + JSON.stringify(e),      icon: 'none'    })    bitmap.clear()  });},toSave() {  uni.showModal({    title: '图片保存',    content: '确定要保存图片吗',    success: e => {      if (e['confirm']) {        this.saveImgFile();      }    }  });}