【摘要】 使用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地图截图的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！