Показать изображение ниже холста, созданного 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';