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);
    });
}