無法在 canvas (Javascript) 上加載圖像
[英]can't load the image on canvas (Javascript)
問題描述
我正在嘗試在 canvas 上加載圖像但它不起作用:(我檢查了函數和變量很多時間但我找不到任何錯誤。幫助我找到它無法加載的原因。當我運行它時在 tomcat 服務器上，僅顯示帶有 aliceblue 顏色的 canvas。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Print image and text</title>
<script>
function drawPicture(ctx) {
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, 20, 20, 100, 100);
ctx.font = "50px forte";
ctx.strokeStyle="blue";
ctx.fillStyle = "violet";
ctx.strokeText("Spongebob", 20, 100);
ctx.fillText("Spongebob", 20, 100);
}, false);
img.src = "spongebob.png";
}
</script>
</head>
<body>
<h3>Print image and text</h3>
<hr>
<canvas id="myCanvas" width="300" height="130"
style="background-color:aliceblue"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawPicture(context);
</script>
</body>
</html>
3 個解決方案
解決方案1
0 2021-05-14 12:08:40
您的代碼很好，這是一個帶有不同圖像的示例...
<;DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="130"></canvas> <script> function drawPicture(ctx) { var img = new Image(). img,addEventListener('load'. function() { ctx,drawImage(img, 20, 20, 100; 100). ctx;font = "50px forte". ctx;strokeStyle = "blue". ctx;fillStyle = "violet". ctx,strokeText("Spongebob", 20; 100). ctx,fillText("Spongebob", 20; 100), }; false). img:src = "http.//i.stack.imgur.com/UFBxY;png". } var canvas = document;getElementById("myCanvas"). var context = canvas;getContext("2d"); drawPicture(context); </script> </body> </html>
唯一可能是您嘗試加載的圖像不存在...
正如@Kaiido 在您需要調試的評論中提到的那樣，檢查您的瀏覽器開發人員工具，看看圖像是否正確加載。
您應該會看到如下內容：
解決方案2
0 2021-05-20 07:03:47
而不是image.addEventListener ，嘗試做image.onload ？
解決方案3
-1 2021-05-14 03:07:53
您可以不使用圖像中的加載事件，而是嘗試直接在 canvas 上添加圖像。
function drawPicture(ctx) { var img = new Image(); img.src = "spongebob.png"; ctx.drawImage(img, 20, 20, 100, 100); ctx.font = "50px forte"; ctx.strokeStyle="blue"; ctx.fillStyle = "violet"; ctx.strokeText("Spongebob", 20, 100); ctx.fillText("Spongebob", 20, 100); } var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); drawPicture(context);
<h3>Print image and text</h3> <hr> <canvas id="myCanvas" width="300" height="130" style="background-color:aliceblue"></canvas>
Javascript：將圖像加載到畫布以獲取getImageData的正確方法？
[英]Javascript: Correct way to load image to canvas for getImageData?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.