HTML Canvas 不显示图像

Posted 2023-03-25

【中文标题】HTML Canvas 不显示图像

【英文标题】：HTML Canvas not displaying images

【发布时间】：2021-10-01 09:41:19

【问题描述】：

我无法使用 drawImage() 让我的图像显示在 html 画布中。我知道文件路径是正确的，因为当我禁用 display: none; 时图像显示得很好 我知道当您尝试在加载图像之前绘制图像时会发生这种情况，您可以通过使用 onload 属性来避免这种情况。

这里是相关的 HTML。

<canvas id='gameScreen'></canvas>
<img id="imgBall"src="assets/images/ball2.png" >
<script type="module"src="src/index.js"></script>

这里是相关的 javascript。

// CANVAS SETUP
let canvas = document.getElementById("gameScreen");
canvas.width = 800;
canvas.height = 600;
let ctx = canvas.getContext("2d");

// DISPLAY BALL
let imgBall = document.getElementById('imgBall');

imgBall.onload = function() 
    console.log(imgBall.src + ' successfully loaded');
    ctx.drawImage(imgBall, 10, 10);


imgBall.onerror = function() 
    console.log(imgBall.src + ' failed to load');

让我感到困惑的是，我没有从 imgBall.onload 或 imgBall.onerror 收到任何控制台消息。

我对 Javascript 和 canvas 还很陌生，所以如果答案非常明显，我深表歉意。

【问题讨论】：

可能在 javascript 有机会添加 onload 处理程序之前图像已经完成加载。

顺便说一句，您的 HTML 属性之间缺少空格。另外，如果 img 是 display: none 浏览器是否会费心加载它？

此代码在带有随机图片的 sn-p 中运行良好，您的图片有问题吗？检查路径应该是“./assets/images/ball2.png”还是“/assets/images/ball2.png”？

【参考方案1】：

为了解决这个问题，我动态创建了一个图像标签，然后在我添加了错误和 onload 的事件处理程序之后给它一个 src。

这让我认为问题是由于在您的脚本标签有机会将事件侦听器添加到 img 标签之前加载图像造成的。

// CANVAS SETUP
let canvas = document.getElementById("gameScreen");
canvas.width = 800;
canvas.height = 600;
let ctx = canvas.getContext("2d");

// DISPLAY BALL
const imgBall = document.createElement("img");

imgBall.onload = function() 
    console.log(imgBall.src + ' successfully loaded');
    ctx.drawImage(fitImageOntoCanvas(imgBall,25,25), 10, 10);


imgBall.onerror = function() 
    console.log(imgBall.src + ' failed to load');


imgBall.src = "https://pngimg.com/uploads/football/football_PNG52737.png"


// need to resize because my ball image is huge
// thanks @markE https://***.com/questions/38664890/resize-images-with-canvas-before-uploading
function fitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT)

    // calculate the scaling factor to resize new image to 
    //     fit MAX dimensions without overflow
    var scalingFactor=Math.min((MAX_WIDTH/img.width),(MAX_HEIGHT/img.height))

    // calc the resized img dimensions
    var iw=img.width*scalingFactor;
    var ih=img.height*scalingFactor;

    // create a new canvas
    var c=document.createElement('canvas');
    var ctx=c.getContext('2d');

    // resize the canvas to the new dimensions
    c.width=iw;
    c.height=ih;

    // scale & draw the image onto the canvas
    ctx.drawImage(img,0,0,iw,ih);
    
    // return the new canvas with the resized image
    return(c);

<canvas id="gameScreen" height="500" width="500"></canvas>

【讨论】：

谁投反对票，请在评论中至少用两句话说明原因。找出究竟是什么错误非常有趣——无论是对答案的作者还是对其他所有人。

我很高兴我回答了这个问题，第二天几乎完全使用此代码在二维码中放置徽标。