记录一下uniapp保存图片到相册

需求是将当前的页面生成为图片保存到相册

H5处理

使用html2canvas生成图片

import html2canvas from 'html2canvas'

const container = document.querySelector('#container')
html2canvas(container).then(canvas => {
  // 将canvas转换为Blob对象
  canvas.toBlob(blob => {
        const reader = new FileReader();
        reader.readAsDataURL(blob); // 读取Blob数据并以Base64格式返回结果
        reader.onloadend = function() {
            const url = reader.result; // 获取生成的URL地址
            let link = document.createElement('a');
            link.style.display = 'none'; // a标签隐藏
            link.href = url;
            link.download = 'image.png'; // 下载的文件名
            document.body.appendChild(link);
            link.click();
        };
  }, 'image/png')
})

app及其他端处理

前提已授权访问相册的权限

var pages = getCurrentPages(); //获取当前页面信息
var page = pages[pages.length - 1];
var bitmap = null;
var currentWebview = page.$getAppWebview();
bitmap = new plus.nativeObj.Bitmap('amway_img');
let that = this
// 将webview内容绘制到Bitmap对象中
currentWebview.draw(bitmap, function() {
    // console.log('截屏绘制图片成功');
    let rand = Math.floor(Math.random() * 10000)
    let saveUrl = '_doc/' + rand + 'a.jpg'
    bitmap.save(saveUrl, {}, function(i) {
        uni.saveImageToPhotosAlbum({
            filePath: i.target,
            success: function() {
                // bitmap.clear(); //销毁Bitmap图片
                uni.showToast({
                    title: '保存图片成功',
                    mask: false,
                    duration: 1500
                });
            },
    });
})