Heatmap Div to Image download

Question

У меня проблема, мне нравится загружать как изображение div содержимое, которое заполнено картой. Мне нравится иметь кнопку и нажимать, чтобы загрузить все содержимое div с картой и теплотой.

Проблема заключается в том, когда я иду скачать этот пример:

var element = $("#divMap"); // global variable 
    var getCanvas; // global variable  
$("#btn-Preview-Image").on('click', function() { 
      html2canvas(element, { 
       onrendered: function (canvas) { 
        $("#previewImage").append(canvas); 
        getCanvas = canvas; 
       } 
      }); 

     }); 

     $("#btn-Convert-Html2Image").on('click', function() { 
      var imgageData = getCanvas.toDataURL("image/png"); 
      // Now browser starts downloading it instead of just showing it 
      var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
      $("#btn-Convert-Html2Image").attr("download", "map.png").attr("href", newData); 
     }); 

Это скачать только нагревает, карта от Google отсутствует. я следовать этому примеру из link

Пожалуйста, помогите :)

Answer 1

Я предлагаю пойти в http://www.w3schools.com/html/html_intro.asp, чтобы получить ответ на свой вопрос. Вы можете найти полную информацию о переменных и jquery, чтобы решить вашу проблему.

Answer 2

Так как я вижу проблему с обработчиком в настоящее время, это то, что он не распознает карту как часть конкретного холста div, который вы хотите сохранить в изображении. Честно говоря, поскольку вы не задокументировали весь свой код, сложно сказать вам, в чем проблема или почему он это делает, но в качестве предложения вы можете попробовать несколько альтернативных способов достижения одной и той же конечной цели.

Один из них Html2Canvas, как вы использовали, но вместо того, чтобы следовать примеру из данной ссылки перейти к документации: http://html2canvas.hertzen.com/examples.html

Есть несколько других вопросов переполнения стека, которые могут дать вам необходимую информацию (1, 2, 3)

Надеюсь, это поможет!