D3 SVG到畫布

Question

如何將d3 SVG元素轉換為畫布？

我在Web-chrome瀏覽器上使用了此工具，但在iOS野生動物園中卻無法使用：

使用此示例。 此示例也不適用於iOs Safari，但適用於chrome桌面參考： http : //bl.ocks.org/syntagmatic/1dd1acd35f77c1fc64863e42f4a405bb

SVG到畫布的功能：

function svgToCanvas() {
          // d3.select("#aloft-canvas-container").html("");
            var devicePixelRatio = window.devicePixelRatio || 1;
            var canvas = d3.select("#aloft-canvas-container").append("canvas")
                .attr("width", (width) * devicePixelRatio)
                .attr("height", (ceilingChartHeight + topMarginFactor + xAxisTopContainerHeight) * devicePixelRatio)
                .style("width", width + "px")
                .style("height", (ceilingChartHeight+ topMarginFactor + xAxisTopContainerHeight) + "px")
                .style("position", "absolute");
            var context = canvas.node().getContext("2d");
            context.scale(devicePixelRatio, devicePixelRatio);
            // Convert SVG to Canvas
            // see: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
            var DOMURL = window.URL || window.webkitURL || window;
            var svgNode = d3.select("#meteo-barbs-container").node(),
            serializer = new XMLSerializer();
            // var svgString = '<svg xmlns="http://www.w3.org/2000/svg">' + serializer.serializeToString(svgNode) + '</svg>';
            var svgString =  '<svg xmlns="http://www.w3.org/2000/svg">' + domNodeToString(svgNode) + '</svg>';;
            console.log(svgString);
            var image = new Image();
            var svgBlob = new Blob([svgString], {
                type: "image/svg+xml"
            });
            var url = DOMURL.createObjectURL(svgBlob);

            image.onload = function () {
                context.drawImage(image, 0, 0);
                DOMURL.revokeObjectURL(url);
                d3.select("#meteo-barbs-container").remove();
            }

            image.src = url;
        };

在iOS中，它僅繪制一半的畫布。 不知道發生了什么事:-(

Answer 1

canvg庫的使用簡化了所有這一切：-)

https://github.com/canvg/canvg

contents.convertSvgToCanvas = function (sourceSvgId, canvasContainerId, canvasId, canvasWidth, canvasHeight, callback) {
    var serializer = new XMLSerializer();
    var svgNode = d3.select("#" + sourceSvgId).node();
    var devicePixelRatio = window.devicePixelRatio || 1;
    d3.select("#" + canvasContainerId).append("canvas")
        .attr("id", canvasId)
        .attr("width", (canvasWidth) * devicePixelRatio)
        .attr("height", (canvasHeight) * devicePixelRatio)
        .style("position", "absolute");
    if (svgNode) {
        var cv = document.getElementById(canvasId);
        var ctx = cv.getContext("2d");
        var pixelRatio = window.devicePixelRatio || 1;
        cv.style.width = cv.width + "px";
        cv.style.height = cv.height + "px";
        cv.width *= pixelRatio;
        cv.height *= pixelRatio;
        ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
        canvg(document.getElementById(canvasId), serializer.serializeToString(svgNode));
        callback();
    }
};