使用html2canvas 进行leaflet地图截图

  1   function getImageWithText(canvas, text) {
  2 
  3         const context = canvas.getContext("2d");
  4 
  5         // add the screenshot data to the canvas
  6 
  7         // let rawData = context.getImageData(0,0,canvas.width,canvas.height);
  8         // let imageData = rawData.data;
  9         //context.putImageData(imageData, 0, 0);
 10         context.font = "10px Arial";
 11         context.fillStyle = "#000";
 12         context.fillRect(
 13             0,
 14             canvas.height - 30,
 15             context.measureText(text).width + 20,
 16             30
 17         );
 18 
 19         // add the text from the textInput element
 20         context.fillStyle = "#fff";
 21         context.fillText(text, 10, canvas.height - 10);
 22 
 23         return canvas.toDataURL("image/png");//.replace("image/png", "image/octet-stream");
 24     }
 25 
 26     function downloadImage(filename, dataUrl) {
 27 
 28         // 生成一个a元素
 29         let a = document.createElement(‘a‘)
 30         // 创建一个单击事件
 31         let event = new MouseEvent(‘click‘)
 32 
 33         // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
 34         a.download = filename
 35         // 将生成的URL设置为a.href属性
 36         a.href = dataUrl
 37 
 38         // 触发a的单击事件
 39         a.dispatchEvent(event)
 40 
 41 
 42         return;
 43 
 44         // the download is handled differently in Microsoft browsers
 45         // because the download attribute for <a> elements is not supported
 46         if (!window.navigator.msSaveOrOpenBlob) {
 47             // in browsers that support the download attribute
 48             // a link is created and a programmatic click will trigger the download
 49 
 50             console.log(dataUrl);
 51 
 52             const img = new Image();
 53             img.src = dataUrl;
 54             const newWin = window.open("", "_blank");
 55             newWin.document.write(img.outerHTML);
 56             newWin.document.title = "SYWate-GIS 地图";
 57             newWin.document.close();
 58 
 59             //const element = document.createElement("a");
 60             //element.setAttribute("href", dataUrl);
 61             //element.setAttribute("download", filename);
 62             //element.style.display = "block";
 63             //document.body.appendChild(element);
 64 
 65             //element.click();
 66             //document.body.removeChild(element);
 67 
 68         } else {
 69             // for MS browsers convert dataUrl to Blob
 70             const byteString = atob(dataUrl.split(",")[1]);
 71             const mimeString = dataUrl
 72                 .split(",")[0]
 73                 .split(":")[1]
 74                 .split(";")[0];
 75             const ab = new ArrayBuffer(byteString.length);
 76             const ia = new Uint8Array(ab);
 77             for (let i = 0; i < byteString.length; i++) {
 78                 ia[i] = byteString.charCodeAt(i);
 79             }
 80             const blob = new Blob([ab], { type: mimeString });
 81 
 82             // download file
 83             window.navigator.msSaveOrOpenBlob(blob, filename);
 84         }
 85     }
 86 
 87     function downimg(canvas){
 88         let iframe = document.createElement(‘iframe‘); //或者img
 89         //var dimensions = __WEBPACK_IMPORTED_MODULE_3__basemap_js__["a" /* map */].getSize();
 90         iframe.width = canvas.width;
 91         iframe.height = canvas.height;
 92         iframe.src = canvas.toDataURL();
 93         iframe.crossOrigin = "Anonymous";
 94         window.open(iframe.src);
 95     }
 96 
 97     function exportImage(id){
 98 
 99         html2canvas(document.querySelector("#"+id),{allowTaint: true,useCORS: true}).then(canvas => {
100 
101             let dataUrl = getImageWithText(canvas,"SYWater-2020©");
102 
103             downloadImage("sywater-gis",dataUrl)
104 
105         });
106     };