画布绘制图像函数在画布后插入 img

Question

 var canvas = document.getElementById("canvaspreview");
       canvas.width=w;canvas.height=h;
       var ctx=canvas.getContext("2d");    
      var img=new Image();

      img.src=url;img.width=w;img.height=h;
      ctx.drawImage(img,0,0,w,h);

我们希望从这段代码中通过其在画布 DOMElement 中的 URL 绘制图像，但是当我检查 DOM 时，我注意到在 canvas 之后插入了一个新的 DOMELement IMG。

有没有推荐的语法，知道DOM好像是这样的：

<div id="bigpreview" style="display:block;">
  <canvas id="canvaspreview" width="800" height="520">Canvas not supported </canvas> 
</div>

我得到的结果是：

<div id="bigpreview" style="display:block;">
  <canvas id="canvaspreview" width="800" height="520">Canvas not supported </canvas> 
  <img src="" width="" height=""/>
</div>

Answer 1

找到！

绘制图像应在图像加载后完成，

img.onload=function(e){
 ctx.drawImage(img,0,0,w,h); 
  // بقية الكود هنا
}

看这个例子：