顯示圖像Canvg創建的畫布

Question

我已經使用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"; 

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