Question

我是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>

`

Answer 1

您输入的路径错误，javascript中的[\]会转义下一个字母

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

因此，当您将路径放置为“'\ Images \ trial.jpg'”时，结果为Images rial.jpg

您可以转义路径，使用String.raw this my \n really raw path或将路径放入反引号[like this]

使用JavaScript上传图像到Canvas？

1 个答案: