html и Svg to Canvas javascript

Question

<div id="Contents"> 
<div style="float:left;margin-left:10px;"> 
<svg></svg> 
</div> 
<div style="float:left;margin-left:10px;"> 
<svg></svg> 
</div> 
</div> 

Это мой html-код. Я хочу преобразовать изображение холста.

html2canvas($("#Contents"), { 
    onrendered: function(canvas) { 
    window.open(canvas.toDataURL()); 

    } 
}); 

Я использую плагин html2canvas для преобразования его в изображение, но он не отображает svg. Решаю преобразования SVG тп холст, но теперь html2canvas не работает

var $to=$("#MainContents").clone(); 

      $($to).children(".box").each(function() { 
    var svg = ResizeArray[$(this).children(".box-content").children().attr("new-id")-1].svg(); 
      var Thiscanvas = document.createElement("canvas"); 
      Thiscanvas.setAttribute("style", "height:" + 100 + "px;width:" + 100+ "px;"); 

      canvg(Thiscanvas, svg); 

      $(this).append(Thiscanvas); 

     }); 
     html2canvas($($to), { 
     onrendered: function(canvasq) { 
     var w=window.open(canvasq.toDataURL()); 
     w.print(); 
     } 
    }); 

можно конвертировать SVG в холст, но html2canvas функция не работает.

Answer 1

html2canvas не позволяет сохранить SVG.
https://github.com/niklasvh/html2canvas/issues/95

Если вы хотите сохранить SVG для Вас следовать другой путь, чтобы превратить ваш SVG в PNG, например

SVG -> холст -> PNG -> Canvas -> PNG

Answer 2

Поскольку html2canvas не принимает элементы svg, вам нужно преобразовать все элементы svg в холст, прежде чем вы вызовете метод html2canvas. Вы можете использовать библиотеку canvg для преобразования всех svg в холст. Вы можете передать объект JQuery (который необходимо преобразовать из SVG в холст, также может быть родительским элементом) следующим способом:

function svgToCanvas (targetElem) { 
var nodesToRecover = []; 
var nodesToRemove = []; 

var svgElem = targetElem.find('svg'); 

svgElem.each(function(index, node) { 
    var parentNode = node.parentNode; 
    var svg = parentNode.innerHTML; 

    var canvas = document.createElement('canvas'); 

    canvg(canvas, svg); 

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

    nodesToRemove.push({ 
     parent: parentNode, 
     child: canvas 
    }); 

    parentNode.appendChild(canvas); 
}); 

html2canvas(targetElem, { 
    onrendered: function(canvas) { 
     var ctx = canvas.getContext('2d'); 
     ctx.webkitImageSmoothingEnabled = false; 
     ctx.mozImageSmoothingEnabled = false; 
     ctx.imageSmoothingEnabled = false; 
    } 
}); 

}

Answer 3

Ваше решение прекрасно работает. Поскольку я не использую jQuery в своем приложении, мне пришлось изменить пару строк в svgCanvas для получения элементов svg и итерации через них. Остальные функции работали без каких-либо изменений. Мой код ...

function svgToCanvas (targetElem) { 
     var nodesToRecover = []; 
     var nodesToRemove = []; 

     var svgElems = document.getElementsByTagName("svg"); 

     for (var i=0; i<svgElems.length; i++) { 
      var node = svgElems[i]; 
      var parentNode = node.parentNode; 
      var svg = parentNode.innerHTML; 

      var canvas = document.createElement('canvas'); 

      canvg(canvas, svg); 

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

      nodesToRemove.push({ 
       parent: parentNode, 
       child: canvas 
      }); 

      parentNode.appendChild(canvas); 
     } 
} 

Answer 4

Вам нужно будет использовать canvg библиотеку для рисования этого SVG на временный холст, а затем удалить этот холст сразу сделать снимок экрана с помощью html2canvas.

Вот ссылка на canvg: https://code.google.com/p/canvg/downloads/list

Попробуйте это:

//find all svg elements in $container 
//$container is the jQuery object of the div that you need to convert to image. This div may contain highcharts along with other child divs, etc 
var svgElements= $container.find('svg'); 

//replace all svgs with a temp canvas 
svgElements.each(function() { 
    var canvas, xml; 

    canvas = document.createElement("canvas"); 
    canvas.className = "screenShotTempCanvas"; 
    //convert SVG into a XML string 
    xml = (new XMLSerializer()).serializeToString(this); 

    // Removing the name space as IE throws an error 
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, ''); 

    //draw the SVG onto a canvas 
    canvg(canvas, xml); 
    $(canvas).insertAfter(this); 
    //hide the SVG element 
    this.className = "tempHide"; 
    $(this).hide(); 
}); 

//... 
//HERE GOES YOUR CODE FOR HTML2CANVAS SCREENSHOT 
//... 

//After your image is generated revert the temporary changes 
$container.find('.screenShotTempCanvas').remove(); 
$container.find('.tempHide').show().removeClass('tempHide');