canvgによって作成されたキャンバス画像を表示する

Question

canvgプラグインを使用して1つのキャンバスを作成しました。

次に、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"; 

Answer 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';