的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。