如何截取GMaps框架并将其转化为带有Javascript的图像？

-1

我在将一个Google地图框转换为base64图像时出现问题，如下图所示，框架已保存，但地图未显示在其中。如何截取GMaps框架并将其转化为带有Javascript的图像？

我想知道为什么不采取框架内。

的jsfiddle：http://jsfiddle.net/Lindow/gvy1x7kf/6/

HTML：

<input type="button" id="btnSave" value="Save PNG"/> 
<hr> 
<div class="elements" id="map"></div> 
<div class="elements" id="img-out"></div>

的JavaScript：

$(function() { 
    $("#btnSave").click(function() { 
     html2canvas($("#map"), { 
      onrendered: function(canvas) { 
       theCanvas = canvas; 
       document.body.appendChild(canvas); 

       // Convert and download as image 
       Canvas2Image.saveAsPNG(canvas); 
       $("#img-out").append(canvas); 
       // Clean up 
       //document.body.removeChild(canvas); 
      } 
     }); 
    }); 
}); 

var map = new GMaps({ 
    div: '#map', 
    lat: -12.043333, 
    lng: -77.028333 
});

什么建议吗？

来源

2017-08-07 Lindow

你的小提琴只是抛出一个Canvas2Image不存在的错误... – CBroe

@CBroe仍然问题不是因为这个，我修正了它，仍然有相同的错误。 – Lindow

错误仍然在你的小提琴中相同，我没有看到任何更新。 – CBroe

您需要做的是在html2canvas($('#id'), {...});内部添加useCORS: true,。

什么useCORS用于？

跨域资源共享是访问不同域的web资源的标准。

的jsfiddle：http://jsfiddle.net/Lindow/60yn2hss/

的JavaScript：

$("#btnSave").click(function() { 
    html2canvas($("#map"), { 
     useCORS: true, #<--- here 
     onrendered: function(canvas) { 
      theCanvas = canvas; 
      document.body.appendChild(canvas); 
      $("#img-out").append(canvas); 
     } 
    }); 
});

输出：

了解更多在这里：https://html2canvas.hertzen.com/documentation.html

来源

2017-08-07 12:16:30 Lindow

如何截取GMaps框架并将其转化为带有Javascript的图像？

回答

相关问题