javascript - 使用 JavaScript 将图像上传到 Canvas？

标签 javascript html css image

我是 JS 的新手，但我目前正在尝试将图像上传到 HTML Canvas 。代码没有问题，我只是在控制台中不断收到错误消息:无法加载资源:服务器响应状态为 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 中的 [\] 转义了下一个字母