将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屋!