未能在画布中放置图像

Failing to place an image in canvas

本文关键字：图像 布中放      更新时间：2023-09-26

我试图在画布元素中放置一个图像。我的代码如下。当我执行它时，我没有得到任何错误，只是一个页面与我的画布的边界区域的轮廓。有人能告诉我哪里错了吗?

html代码:

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title> </title>
 <link rel='stylesheet' href="crop_pic.css">
 </head>
 <body>
 <div>
 <canvas id="panel" width="380" height="380"></canvas>
 </div>
 </body>
 <script src=crop_pic.js></script>  
 </html>
javascript: 

window.onload = function(){
var canvas = document.getElementById('panel');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'storage/resized_Glong.jpg';
ctx.drawImage(img,0,0);

}

css: 

 #panel{
border: 1px solid #000;

}

  1. 在脚本标签

    中使用引号
    <script src='crop_pic.js'></script>

  2. 等待，直到图像被加载，然后绘制到画布。为此，添加一个事件侦听器。

    window.onload = function() {
var canvas = document.getElementById('panel');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'storage/resized_Glong.jpg';
img.addEventListener('load', function() {
    ctx.drawImage(img, 0, 0);
});
}
相关文章：