javascript - 在动态创建的 Canvas 上绘制图像

Question

首先see this Fiddle

我想动态创建一个 Canvas 并将其附加到特定的 DIV 并在 Canvas 上绘制内联 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

您还可以使用 Canvas 上生成的图像的宽度:

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 。