Canvas 带有图像的 drawImage() 没有绘制任何东西

Question

我想将文档的所有图像 src 更改为 dataURL。

我试图通过 for of 循环绘制 canvas 中的所有图像，但它不起作用。帮帮我！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./adudio1.png" alt=""height="300px"width="200px"class="i">
    <img src="./adudio1.png" alt=""height="300px"width="500px"class="i">

    
</body>
<script>
    const img = document.querySelectorAll("img");
    for(items of img){
        let c = document.createElement("canvas");
        document.querySelector("body").append(c);
        c.height=items.height;
        c.width=items.width;
        c.style="border:2px solid #CCC;";
        ctx = c.getContext("2d");
        ctx.drawImage(items,0,0)
  
    }
</script>
</html>

Answer 1

您的代码没有等待图像加载。将您的 canvas 绘图代码添加到每个图像的 onload 函数中，以便仅在图像数据到达时执行它。

const images = document.querySelectorAll("img");

for (const image of images) {
  image.onerror = function () { 
    console.error("image failed to load"); 
  };
  image.onload = function () {
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.height = image.height;
    canvas.width = image.width;
    canvas.style = "border: 2px solid #CCC;";
    ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0);
  };
}

<img src="http://placekitten.com/200/300" 
     alt=""
     height="300"
     width="200" 
     class="i"
>
<img src="http://placekitten.com/200/300" 
     alt=""
     height="300"
     width="200" 
     class="i"
>

顺便说一句，height="300px"width="500px" 需要属性之间的空格，并且不需要在每个值之后 px。

使用 const item 而不是 items 以避免在循环中创建全局变量。

Canvas 带有图像的 drawImage() 没有绘制任何东西

Canvas drawImage() with image doesn't draw anything

javascript

html5-canvas