h5 页面长按保存页面截图

//首先下载 html2canvas 插件 npm install html2canvas 
//进到页面去后台拿二维码图片
把整个页面通过html2canvas 插件转为base64编码放到img标签中然后定位在 长按保存图片的按钮上 设置css opacity：0
过程中会遇到 canvas 画布污染 因为后台返回的图片一般都会跨域 插件第二个参数设置为{useCORS:true}

然后需要运维同学帮忙设置下CORS资源共享 

或者自己动手使用插件把后台返回的二维码图片再次通过 插件转为base64编码在放到img标签在保存页面
插件第一个参数为页面的节点 第二个参数为允许跨域 返回的就是canvas元素
html2canvas(document.getElementById('view'),{useCORS:true}).then(function(canvas) {})

getCode() {
    $http.post('', {
        'url': '',
    }).then(res => {

      this.setState({

         QrCode: res.QrCode,

      },()=>{
        this.base64Img(res.QrCode)
      });

    });
}

//需要注意ios不支持 image.onload image.src赋值放在image.onload之后

base64Img(src) {
    let that = this;
    let image = new Image();
    let base64 = '';
    image.crossOrigin = "*";  // 支持跨域图片
    image.onload = function(){
        that.setState({
            QrCode: that.getBase64Image(image)
        },()=>{
            that.takeScreenshot();
        });
    };
    image.src = src + '&v=' + Math.random(); // 处理缓存
}

getBase64Image(img) {
    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    let dataURL = canvas.toDataURL("image/png");
    return dataURL;
}

takeScreenshot() {
    html2canvas(document.getElementById('view'),{useCORS:true}).then(function(canvas) {
        let imgData = canvas.toDataURL("png");
        let z = document.createElement('img');
        z.src = canvas.toDataURL("image/png");
        z.class = 'footerSave';
        document.getElementById('save').appendChild(z);
    });
}

转载于:https://www.cnblogs.com/pengfeiguo/p/9547943.html