web-dev-qa-db-ja.com

htmlおよびSvgからCanvasjavascript

<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キャンバスの変換を解決しましたが、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をcanvasに変換できますが、html2canvas関数が機能しません。

javascripthtmlcanvassvghtml2canvas
11
user2622044

このsvgを一時的なキャンバスに描画するにはcanvgライブラリを使用し、html2canvasを使用してスクリーンショットを撮ったらそのキャンバスを削除する必要があります。

Canvgのリンクは次のとおりです： https://github.com/canvg/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');
9
shinobi

Html2canvasはsvg要素を受け取らないため、html2canvasメソッドを呼び出す前に、すべてのsvg要素をcanvasに変換する必要があります。 canvg ライブラリを使用して、すべてのsvgをcanvasに変換できます。 jqueryオブジェクト（svgからcanvasに変換する必要があり、親要素にすることもできます）を次のメソッドに渡すことができます。

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;
    }
});

}

3
ABHILASH SB

あなたのソリューションは美しく機能します。私はアプリケーションでjQueryを使用していないため、svg要素を取得してそれらを反復処理するためにsvgCanvasの数行を変更する必要がありました。残りの機能は変更なしで機能しました。私のコードは...

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);
        }
}
1
SrinivasG

html2canvasがSVGの保存を許可しないことが問題です。
https://github.com/niklasvh/html2canvas/issues/95

SVGを保存したい場合は、SVGをPNGに変換するなど、他の方法に従います。

SVG->キャンバス-> PNG->キャンバス-> PNG

0
Alessandro Minoccheri