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