动态创建 div 时不显示画布中的图像答案

【问题标题】：Image from canvas is not displayed when the div is created dynamically动态创建 div 时不显示画布中的图像
【发布时间】：2012-10-10 12:04:37
【问题描述】：

代码：

$(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(); 
}

clone() 函数：

function clone(){

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

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

}

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

【问题讨论】：

标签： jquery html canvas

【解决方案1】：

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

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

【讨论】：

是的。如果我尝试在另一个 div 上显示它，请参阅我正在获取图像。我只想知道我是否没有在 divshow() 函数中实现标记并在某处静态声明它。我可以在动态创建的 div 之间获取这个 img 标签吗？
是的，可以做到。您可以使用与已有的类似的语法。只需调用 var imgeElement = $(document.createElement("img")).attr("id", "Imagedisplay"); 只要您需要将 img 存储为变量而不添加将其添加到文档中，然后在需要将其添加到 div 时调用 newImageBoxdiv.append(imageElement);。