将Google地图保存为图片 - 使用javascript（可截取图片） [英] Save google map as an image - using javascript (able to take screenshot)
问题描述
我参考了以下SO问题来捕获使用javascript（html2canvas）的Google地图的屏幕截图。 feedback.js ， screen-capturing-using-html2canvas ，创建屏幕截图，捕获-div-into-image ， html2canvas-github 。
我使用静态地图来获取图像，但我有近150个标记，并且URL的总长度超出了2048个字符的限制。
我能够在javascript中使用事件侦听器捕获屏幕截图。我用来捕捉图像的代码如下。我尝试使用window.save，但html2canvas.js中没有这种方法。有关如何将图像保存到本地文件系统的建议？
function takeImage（）{
html2canvas（$（ ＃map-canvas），{
onrendered：function（canvas）{
var img = canvas.toDataURL（image / png）
window.open（img）;
//window.save(img）; / *无效。* /
}
}）;
事件监听器：
google.maps.event.addListener（map，'tilesloaded'，function（）{
takeImage（）;
}）;
我遇到了IE9的问题，图像已下载，但已损坏。我唯一找到的解决方案是在一个新标签上打开图像，然后我可以右键单击并保存为。
我使用html2canvas作为下载div区域（地图容器）的下一个代码作为图像。
函数download_image（）{
if（$。browser.safari）{//修正Chrome
var transform = $（。gm-style> div：first> div）。css（transform ）;
var comp = transform.split（，）; //分解变换矩阵
var mapleft = parseFloat（comp [4]）; //获得左值
var maptop = parseFloat（comp [5]）; //获得最高值
$（.gm-style> div：first> div）。css（{//获取地图容器。不确定是否稳定
transform：none ，
left：mapleft，
top：maptop，
}）;
$ b $ html2canvas（[$（＃div_id）[0]]，{
logging：false，
useCORS：true，
放弃：function（canvas）{
if（$（＃downloadimg）。length> 0）
$（＃downloadimg）。remove（）;
var fileName =file_name如果（/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'）; /只适用于IE 9,10和11
download_image_IE（canvas，fileName）;
}
else {
$（body）。append（< a id = 'downloadimg'download ='+ fileName +'href ='+ canvas.toDataURL（image / png）。replace（image / png，image / octet-stream）+'><< （＃downloadimg）。长度> 0）
$（＃downloadimg）[0] .click（）;
}
if（$ ;
if（$。browser.safari）{//修正Chrome
$（。gm-style&g t; div：first> div）。css（{
left：0，
top：0，
transform：transform
}）;
}
}
}）;
函数download_image_IE（canvas，文件名）{
if（$ .browser.version.match（/9.0/））{//仅适用于IE9
var w = window.open（）;
$（w.document.body）.html（'< img src =''+ canvas.toDataURL（）+'/>'）;
}
else {
var image = canvas.toDataURL（）;
image = image.substring（22）; //删除数据的东西
var byteString = atob（image）;
var buffer = new ArrayBuffer（byteString.length）;
var intArray = new Uint8Array（buffer）;
for（var i = 0; i< byteString.length; i ++）{
intArray [i] = byteString.charCodeAt（i）;
}
var blob = new Blob（[buffer]，{type：image / png}）;
window.navigator.msSaveOrOpenBlob（blob，filename）;
}
}
I referred to the following SO questions to capture a screenshot of google maps using javascript (html2canvas). feedback.js, screen-capturing-using-html2canvas, create-screen-shot, capture-div-into-image, html2canvas-github.
I used static maps to get the image, but I have close to 150 markers and the total length of the URL went way beyond the 2048 character limit.
I am able to capture a screenshot using event listeners in javascript. The code I used to capture the image is below. I tried using window.save, but there is no such method in html2canvas.js. Any suggestions on how to save the image to the local filesystem?
function takeImage() {
html2canvas($("#map-canvas"), {
onrendered: function( canvas ) {
var img = canvas.toDataURL("image/png")
window.open(img);
//window.save(img); /*does not work.*/
}
});
}
The event listener:
google.maps.event.addListener(map, 'tilesloaded', function() {
takeImage();
});
I had problems with IE9 and, in Chrome, some images are downloaded but they are corrupted. The only solution I found for IE9 was opening the image on a new tab, then I was able to right click and save as. I made the next code for download the div area (container of the map) as an image using html2canvas.
function download_image() {
if($.browser.safari) {// Fix for Chrome
var transform=$(".gm-style>div:first>div").css("transform");
var comp=transform.split(","); //split up the transform matrix
var mapleft=parseFloat(comp[4]); //get left value
var maptop=parseFloat(comp[5]); //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
"transform":"none",
"left":mapleft,
"top":maptop,
});
}
html2canvas([$("#div_id")[0]], {
logging: false,
useCORS: true,
onrendered: function (canvas) {
if ($("#downloadimg").length > 0)
$("#downloadimg").remove();
var fileName = "file_name.png";
if (/\bMSIE|Trident\b/.test(navigator.userAgent) && $.browser.version.match(/9.0|10.0|11.0/)) {//Only for IE 9, 10 and 11
download_image_IE(canvas, fileName);
}
else {
$("body").append("<a id='downloadimg' download='" + fileName + "' href='" + canvas.toDataURL("image/png").replace("image/png", "image/octet-stream") + "'><a/>");
}
if ($("#downloadimg").length > 0)
$("#downloadimg")[0].click();
if($.browser.safari) {// Fix for Chrome
$(".gm-style>div:first>div").css({
left:0,
top:0,
"transform":transform
});
}
}
});
}
function download_image_IE(canvas, filename) {
if ($.browser.version.match(/9.0/)){ //Only for IE9
var w = window.open();
$(w.document.body).html('<img src="'+ canvas.toDataURL() +'"/>');
}
else{
var image = canvas.toDataURL();
image = image.substring(22); // remove data stuff
var byteString = atob(image);
var buffer = new ArrayBuffer(byteString.length);
var intArray = new Uint8Array(buffer);
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
var blob = new Blob([buffer], { type: "image/png" });
window.navigator.msSaveOrOpenBlob(blob, filename);
}
}
这篇关于将Google地图保存为图片 - 使用javascript（可截取图片）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
