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のTPキャンバスを変換するが、今、私はキャンバスに、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(); 
     } 
    }); 

を働いていないhtml2canvas解きます。

Answer 1

html2canvasでSVGを保存できない問題があります。
https://github.com/niklasvh/html2canvas/issues/95

あなたは他の方法に従ってSVGを保存したい場合は、例えばPNGへ

SVGあなたのSVGを変換したい - >キャンバス - > PNG - >キャンバスを - > PNG

Answer 2

html2canvasはsvg要素を使用しないので、html2canvasメソッドを呼び出す前に、すべてのsvg要素をキャンバスに変換する必要があります。 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を使用していないので、svg要素を取得し、それらを反復するために、svgCanvasの2行を変更する必要がありました。残りの機能は変更なしで機能しました。私のコードは、あなたが一時的なキャンバスに、このSVGを描画するためのcanvgライブラリを使用して、あなたがhtml2canvasを使用してスクリーンショットを撮るたら、そのキャンバスを削除する必要があります...

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ためのリンクです：

//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');