[英]Uploading an image to a Canvas using JavaScript?
我是JS的新手，但目前正在嘗試將圖像上傳到HTML畫布。 代碼沒有問題，我只是在控制台中不斷收到一條錯誤消息：無法加載資源：服務器以404（未找到）狀態進行響應。 在我的IDE中，它說有圖像，但是由於某種原因它沒有顯示在預覽中。 任何幫助將不勝感激！
var canvas = document.querySelector('.canvas1'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; //console.log(canvas); var c = canvas.getContext('2d'); load_image(); var base_image; function load_image() { "use strict"; base_image = new Image(); base_image.src = '\\Images\\trial.jpg'; base_image.onload = function() { c.drawImage(base_image, 0, 0); }; }
@charset "utf-8"; /* CSS Document */ body { margin: 0; } .canvas1 { height: 100vh; width: 98.7vw; margin: 0; display: block; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Sylvanas</title> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <canvas class="canvas1"> </canvas> <!--<canvas class="canvas2"> </canvas>--> <script src="script.js"></script> </body> </html>
`
您輸入的路徑錯誤，javascript中的[\\]會轉義下一個字母
console.log('\\Images\\trial.jpg')
因此，當您將路徑放置為“'\\ Images \\ trial.jpg'”時，它會導致Images rial.jpg
您可以轉義路徑，使用String.raw this my \\n really raw path也可以將路徑放入反引號[ like this ]
使用以下格式在圖形上自由繪圖/上傳json數據 <canvas> 和JavaScript
[英]Freeform drawing / uploading json data over an image using <canvas> and javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.