的DrawImage动态创建的画布上

Question

首先see this Fiddle

我想动态创建一个画布，它附加到一个特定的DIV并绘制联SVG到画布上。但不能按预期工作。

var randn = '1'; 

    function createme(){ 
     alert("completed 0"); 
      var crCavs = $('<canvas />',{ id : 'mycanvs'+randn }) 

      $('#album').append(crCavs); 
     alert("completed 1"); 

      var svg2 =document.getElementById('sVgsource'+randn).outerHTML, 
       vms =document.getElementById('mycanvs'+randn), // target canvas 
       ctx2 =vms.getContext('2d'); 

      //callback 
      svgToImage(svg2, function(img2){ 
      vms.width =$('#sVgsource'+randn).width(); 
      vms.height =$('#sVgsource'+randn).height(); 
      alert("completed 3"); 
      ctx2.drawImage(img2, 30, 40); 
       alert("completed 4"); 
      } 

      function svgToImage(svg2, callback) { 
      var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2), 
       img2 = new Image; 
      //invoke callback 
       callback(img2); 

       img2.src = nurl; 
       alert("completed 2"); 
      } 
    } 
    createme(); 

Answer 1

你缺少最终括号为svgToImage()功能：

svgToImage(svg2, function(img2) { 
    vms.width = img2.width; 
    vms.height = img2.height; 
    alert("completed 3"); 
    ctx2.drawImage(img2, 0, 0); 
     alert("completed 4"); 
}); // <-- here 

也有一些其他问题：

就重用canvas元素：

var canvCrtrWrp = $('<canvas />',{ id : 'mycanvs'+randn }) 

... 
var vms = canvCrtrWrp[0]; // index 0 is the actual canvas element 

您也可以使用画布上生成的图像的宽度：

svgToImage(svg2, function(img2) { 
    vms.width = img2.width; 
    vms.height = img2.height; 
    ... 

记住使用onload处理程序图像（它被从原始代码中删除）。如果不是一个图像元件被传递回而没有任何实际图像数据（需要一些时间来加载，解码等）：

function svgToImage(svg2, callback) { 
    var nurl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg2), 
     img2 = new Image; 

    img2.onload = function() { 
     callback(this); 
    } 
    ... 

等

更新fiddle。