在canvg创建的画布下方显示图像答案

【问题标题】：Show image below canvas created by canvg在canvg创建的画布下方显示图像
【发布时间】：2017-02-06 08:07:52
【问题描述】：

我使用 canvg 插件创建了一个画布。

然后我想使用 ctx.drawimage() [由 canvg 创建] 在画布下方放置另一个背景图像。

我试过了。

请提出建议。

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));

        var canvas = document.getElementById("canvas");
         var DOMURL = self.URL || self.webkitURL || self;
        ctx = canvas.getContext("2d");
    canvg(canvas, svgString, { ignoreMouse: true, ignoreAnimation: true});
     var img1 = new Image();


        img1.onload = function() {

             ctx.drawImage(img1, 136, 136);


            var png = canvas.toDataURL("image/png");
            document.querySelector('#chart').innerHTML = '<img src="'+png+'"/>';
            DOMURL.revokeObjectURL(png);

        };

  img1.src= "chart.png";

【问题讨论】：

标签： html canvas d3.js svg canvg

【解决方案1】：

这是有效的。使用 ctx.drawSvg(svgString,0,0,500,500);而不是drawImage

  var svgString = new       XMLSerializer().serializeToString(document.querySelector('svg'));

        var canvas = document.getElementById("canvas");
         var DOMURL = self.URL || self.webkitURL || self;

        var ctx = canvas.getContext("2d");

        var DOMURL = self.URL || self.webkitURL || self;
        var img = new Image();
        //var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
        var svg = new Blob([svgString], {type: "image/svg+xml"});
        var url = DOMURL.createObjectURL(svg);


        var png = '';

        var img1 = new Image();



         img1.onload = function(){
           ctx.drawImage(img1, 136, 136);
           ctx.drawSvg(svgString,0,0,500,500);
           var png = canvas.toDataURL("image/png");
            document.querySelector('#chart').innerHTML = '<img src="'+png+'"/>';
            DOMURL.revokeObjectURL(png);
         };
        img1.src = 'chart.png';

【讨论】：