使用html2canvas 进行leaflet地图截图

时间:2020-08-04 19:42:47 来源:

【摘要】 使用html2canvas 进行leaflet地图截图考必过小编为大家整理了关于使用html2canvas 进行leaflet地图截图的信息,希望可以帮助到大家!

使用html2canvas 进行leaflet地图截图

标签:width   url   height   inpu   patch   data   size   eve   int   

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

 

使用html2canvas 进行leaflet地图截图

标签:width   url   height   inpu   patch   data   size   eve   int   

以上就是使用html2canvas 进行leaflet地图截图的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
前端相关推荐 更多>>
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net