31.地图打印之openlayers与html2canvas及ol-rendercomplet

source跨域设置

 crossOrigin:"Anonymous"

出图

第一种，使用html2canvas

// dom生成图片
export const toImg=()=> {
    const dom = window.$olMap.getTargetElement()
    return  html2canvas(dom).then(canvas => {
      var blob =canvas.toDataURL("image/png");
      var parts = blob.split(';base64,');
      var contentType = parts[1]
      //  downloadFile("map.png",canvas.toDataURL("image/png"))
       return contentType;
    });

  }

第二种，使用map.once(‘rendercomplete’,function)

export const toImg2=()=> {
   
   window.$olMap.once('rendercomplete', function () {
      const mapCanvas = document.createElement('canvas');
      const size = window.$olMap.getSize();
      mapCanvas.width = size[0];
      mapCanvas.height = size[1];
      const mapContext = mapCanvas.getContext('2d');
      Array.prototype.forEach.call(
        document.querySelectorAll('.ol-layer canvas'),
        function (canvas) {
          if (canvas.width > 0) {
            const opacity = canvas.parentNode.style.opacity;
            mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
            const transform = canvas.style.transform;
            // Get the transform parameters from the style's transform matrix
            const matrix = transform
              .substring(transform.indexOf("(")+1,transform.indexOf(")"))
              .split(',')
              .map(Number);
            // Apply the transform to the export map context
            CanvasRenderingContext2D.prototype.setTransform.apply(
              mapContext,
              matrix
            );
            mapContext.drawImage(canvas, 0, 0);
          }
        }
      );
      if (navigator.msSaveBlob) {
      
        navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
      } else {
        downloadFile('map.png', mapCanvas.toDataURL("image/png")); 
      }
    });
    window.$olMap.renderSync();
    
}


// 下载图片
 export const downloadFile=(fileName, content)=>{
      var aLink = document.createElement('a');
      var blob = base64Img2Blob(content); //new Blob([content]);
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.dispatchEvent(evt);
      aLink.click()
}

  // 文件格式转化
export const base64Img2Blob=(code)=>{
      var parts = code.split(';base64,');
      var contentType = parts[0].split(':')[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uInt8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {type: contentType});
}