JS drawImage坏了

Question

该图像位于同一目录中，所有内容，我似乎无法使其正常工作。

<body>
<center>
<canvas id='scrn' width='100' height='100'/>
</center>
<script>
function draw() {
var cv = document.getElementById('scrn').getContext('2d');
var img = document.getElementById('image');
cv.drawImage(img,10,10 10, 10,);
}
draw();
</script>
<image id='image' src='test.jpg'/>
</body>

该图像显示在<image>标记中，但不在 canvas 中。 这是为什么？

Answer 1

您需要使用回调，以便仅在图像加载后调用 boot()。 例如：

document.getElementById("image").onload = boot

Answer 2

var canvas = document.getElementById('scrn'); // get your canvas
    if (canvas) {
      var context = canvas.getContext('2d'); // get canvas context
      var img = document.getElementById('image'); // get image
      if (context && img) { // make sure context and img exists
        img.onload = () => { // call drawImage when img has finished loading
          context.drawImage(img,10,10 10, 10,);
        }
      }
    }

我建议在 var 上使用 let 和 const。 为了以后的注意，请始终在图像的 onload 回调中使用 drawImage，因为这样可以确保您希望绘制的图像已成功加载。

JS drawImage坏了

问题描述

2 个解决方案

解决方案1
0 2021-04-10 00:59:19

解决方案2
0 2021-04-15 13:37:43

JS drawImage坏了

问题描述

2 个解决方案

解决方案1 0 2021-04-10 00:59:19

解决方案2 0 2021-04-15 13:37:43

解决方案1
0 2021-04-10 00:59:19

解决方案2
0 2021-04-15 13:37:43