Question

我正在利用canvg将div中存在的svg转换为canvas（直到它工作正常），然后将div的innerHTML复制到另一个div，但它不起作用。画布即将到来，但画布中不会出现任何内容。提前致谢

<div id="k">
<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 
</div>
<div id="kk">
<p>Watch me</p>
</div>

var svgTag = document.querySelectorAll('#k svg');    
    svgTag = svgTag[0];
    var c = document.createElement('canvas');
    c.width = svgTag.clientWidth;
    c.height = svgTag.clientHeight;
    svgTag.parentNode.insertBefore(c, svgTag);
    svgTag.parentNode.removeChild(svgTag);
    var div = document.createElement('div');
    div.appendChild(svgTag);
    canvg(c, div.innerHTML);

    setTimeout(function(){
        var data = $("#k").html();
      $("#kk").append($(''+data+''));
    },5000);

JSFiddle

Answer 1

canvas元素的内容保存为二进制数据，非常类似于图像元素的内容。 Canvas元素没有可用于重新创建画布的innerHTML文本属性。

以下示例显示了使用标准画布2D方法克隆canvas元素的方法：

function canvasClone(c1) {
    var c2 = document.createElement('canvas');
    c2.width=c1.width;
    c2.height=c1.height;
    c2.getContext("2d").drawImage(c1, 0,0);
    return c2;
}

您可以通过将函数包含在小提琴中并将超时处理更改为：

来演示它

setTimeout(function(){
  kk.appendChild(canvasClone(c));
},5000);

如果您愿意，可以随意重写JQuery中的超时代码。

添加包含画布的div不起作用

1 个答案: