Question

我想为开放街道地图实施捕获屏幕截图。

为此我使用html2canvas，它将捕获当前屏幕但不捕获map和svg多边形，

因为我使用了AJAX cal：

function capture() {

  html2canvas($('.map-layout'), {
    logging: true,
    profile: true,
    useCORS: true,
    allowTaint: true,
    onrendered: function (canvas) {

      var dataUrl= canvas.toDataURL("image/png");

      $.ajax({
        url: "/take_screenshot",
        type: "POST",
        contentType:"application/json",
        data: JSON.stringify({project_id:<%= @project.id%>, screen_url:dataUrl }),
        success:function(data){

          alert(data);

    }
  });
}

}）; }

在Controller中，获取参数并保存此图像：

a = params[:screen_url]
data = a.split(",")[1]

File.open('map.png', 'wb') do|f|
  f.write(Base64.decode64(data))
end

它给出了这些日志：

html2canvas: Preload starts: finding background-images html2canvas.js?body=1:20
html2canvas: start: images: 1 / 16 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 2 / 17 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 3 / 18 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 4 / 21 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 5 / 22 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 6 / 23 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 7 / 24 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 8 / 25 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 9 / 26 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 10 / 27 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 11 / 28 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 12 / 29 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 13 / 30 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 14 / 31 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 15 / 32 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 16 / 33 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 17 / 34 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 18 / 35 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 19 / 36 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 20 / 37 (failed: 0) html2canvas.js?body=1:20
html2canvas: start: images: 21 / 38 (failed: 0) html2canvas.js?body=1:20
html2canvas: Preload: Finding images html2canvas.js?body=1:20
html2canvas: Preload: Done. html2canvas.js?body=1:20

我想捕捉当前屏幕的截图，在这个屏幕中我使用开放的街道地图和几个工具，如（放大，缩小，导出，书签，屏幕截图）。

因此，当我尝试上面的代码时，它会生成屏幕截图，但在此屏幕截图中，它不会捕获地图和多边形。

所以我的问题是，如何在生成的图像中捕获此贴图和多边形。

所以任何想法为什么不捕获地图以及svg？

html2canvas没有captuare openstreet地图和svg标签

0 个答案: