动态创建的画布上的DrawImage

DrawImage on a dynamically created canvas

本文关键字：DrawImage 创建 动态      更新时间：2023-09-26

首先看这个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();

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。

相关文章：