使用JavaScript上传图像到Canvas？

Question

I'm new to JS, but I'm currently trying to upload an image to an HTML canvas. 我是JS的新手，但目前正在尝试将图像上传到HTML画布。 There isn't a problem with the code, I just keep getting an error in the console that says: Failed to load resource: the server responded with a status of 404 (Not Found). 代码没有问题，我只是在控制台中不断收到一条错误消息：无法加载资源：服务器以404（未找到）状态进行响应。 In my IDE, it says that the image is there, but for some reason it's not showing on the preview. 在我的IDE中，它说有图像，但是由于某种原因它没有显示在预览中。 Any help would be appreciated!` 任何帮助将不胜感激！

 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>

` `

Answer 1

You are putting the wrong path, [\\] in javascript escapes the next letter 您输入的路径错误，javascript中的[\\]会转义下一个字母

 console.log('\\Images\\trial.jpg')

so when you put path as "'\\Images\\trial.jpg'" it results in Images rial.jpg 因此，当您将路径放置为“'\\ Images \\ trial.jpg'”时，它会导致Images rial.jpg

You can either escape the path,use String.raw this my \\n really raw path or simply put the path in backticks [ like this ] 您可以转义路径，使用String.raw this my \\n really raw path也可以将路径放入反引号[ like this ]

使用JavaScript上传图像到Canvas？

问题描述

1 个解决方案

解决方案1
0 2018-11-07 05:56:26

使用JavaScript上传图像到Canvas？

问题描述

1 个解决方案

解决方案1 0 2018-11-07 05:56:26

解决方案1
0 2018-11-07 05:56:26