jquery - 动态创建 div 时不显示画布中的图像

Question

代码：

$(document).ready(function(){
    $("#AddButton").bind('click', function(event){


    if(document.getElementById('optionselectthree').value=='drawtab')
    {
    divshow();
    clone();
    event.stopPropagation();

    }
    else if(...)
    {

    ..

    }


    });
 });

divshow() 函数：

function divshow(){

var newImageBoxdiv = $(document.createElement('div')).attr("class",'demo');

newImageBoxdiv.html('<img id="Imagedisplay" style="background-repeat: no-repeat; width:auto; width:100%; height:100%; cursor:move; position:absolute;" />');

newImageBoxdiv.insertAfter("#imagedemo");
$('.demo').show(); 
}

克隆（）函数：

function clone(){

var c=document.getElementById("can");
var d=c.toDataURL("image/png");

document.getElementById("Imagedisplay").src=d;

}

大家好，我正在尝试在画布上绘制图像，然后在使用 divshow() 函数动态调用的 div 上显示绘制的图像（clone() 函数）。问题是当我单击#AddButton 时，当图像src 正确时，它会显示没有图像的div。

Answer 1

我怀疑您在 toDataURL 完成之前设置了 src 。一旦 toDataURL 完成，您可能需要使用回调来触发，并在其中设置 src 。尝试在设置 src 之前记录 d 的值以进行检查。

不幸的是，我自己也遇到了这个问题，并且不知道向 toDataURL 添加回调的可靠方法；toBlob 有一个，但似乎还没有正确实施。