Попробуйте найти лучшее решение, чтобы сделать скриншот карты OpenLayers с помощью html2canvas. Элементы карты теряют классы css, изображения не просматриваются

Question

Итак, я знаю о плохой работе html2canvas с css. Может быть, кто-то может помочь мне найти лучшее решение. Мне нужно сделать скриншот карты с элементами. После скриншота я получаю изображение, выглядит неплохо, но в html все элементы (панели, кнопки) карты, теряющие все классы CSS и изображения, не просматриваются.

Итак, что я пытался: reload div на карте js/jquery; reload stylesheets; переместить классы css из «myFile.css» в html;

Я считаю, что это бесполезно для меня.

Как только я пытаюсь переместить cssText в атрибут стиля элементов, и он работает хорошо, но я думаю, что получаю и переписываю все элементы из div и его плохой идеи.

Answer 1

Проблема была в том, что изображения были svg, необходимо было использовать XMLSerializer(), и я иногда думаю, что html2canvas плохо работает с макетами firstFaces, поэтому, если у вас есть проблема с css, которая исправлена ​​importNode. Работа для меня:

//don't forget to declare all js libs and files on html page 

//targetElem - id of map, like a $('#map') 
function screenshotMap(targetElem) { 

var nodesToRecover = []; 
var svgElem = targetElem.find('svg'); 
var serializer = new XMLSerializer(); 

//screenshotAreaId - north layoutUnit of layout this variable need for      
//"update" north layoutUnit 
var oldNode = document.getElementById("screenshotAreaId"); 

//convert all svg's to canvas, filling an arrays for turn back canvas to svg 
svgElem.each(function (index, node) { 

    var parentNode = node.parentNode; 
    //skip nested svg's in "parent" svg, canvg will handle "parent" 
    if(parentNode.tagName != 'DIV'){ 
    return true; 
    } 
    var canvas = document.createElement('canvas'); 
    var svg = parentNode.querySelector('svg'); 
    var svgString = serializer.serializeToString(svg); 

    //canvg lib 
    canvg(canvas, svgString); 

    nodesToRecover.push({ 
     parent: parentNode, 
     child: node 
    }); 

    parentNode.removeChild(node); 
    parentNode.appendChild(canvas); 
}); 

//html2canvas lib, "screenshot map" download file 
html2canvas(targetElem, { 
    onrendered: function (canvas) { 
     var img = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream"); 
     window.location.href = img; 

     //removing canvas, turn back svg's 
     var canvasElem = targetElem.find('canvas'); 
     canvasElem.each(function (index, node) { 
      var parentNode = node.parentNode; 
      parentNode.removeChild(node); 
      parentNode.appendChild(nodesToRecover[index].child); 
     }); 

     //"update" layoutUnit if you have problems with css 
     var newNode = document.importNode(oldNode, true); 
     document.getElementById("layout").appendChild(newNode); 
    } 
}); 
} 

Вы найдете canvg здесь: https://github.com/gabelerner/canvg

Вы найдете html2canvas здесь: http://html2canvas.hertzen.com/