动态创建的画布上的 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

还有一些其他的问题：

只需重用画布元素：

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。