gpt4 book ai didi

javascript - 如何从系统获取图像以加载到html5的canvas中

转载 作者:行者123 更新时间:2023-11-28 20:58:22 26 4
gpt4 key购买 nike

我使用以下方式:-

代码

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = "C:\Images\Demo.jpg";
};

</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>

我想将此图像加载到 Canvas 中。在 imageObj.src 中传递图像 URL 是否正确?

或者还有其他方法来加载图像吗?

提前致谢

最佳答案

你说得几乎是对的。如果您在本地加载文件,则需要在路径前添加 file:///:

imageObj.src = "file:///C:/Images/Demo.jpg";  // also, use forward slashes, not backslashes

我认为所有浏览器都会要求您将图像存储在与当前 HTML 页面相同的目录或子目录中,以便本地 HTML 页面无法从您的硬盘驱动器中抓取内容。

我建议您创建相对于当前 HTML 文档的路径。如果页面位于 file:///C:/Users/shanky/webpages/page.html ,则只需使用:

imageObj.src = "img/Demo.jpg";

加载位于file:///C:/Users/shanky/webpages/img/Demo.jpg的图像。如果您将页面移动到新文件夹或将其托管在不再使用 file: 协议(protocol)的服务器上,这会变得更加容易。

请注意,大多数浏览器对 same origin policy for file: resources 非常挑剔。 。将应用程序托管在简单的本地服务器上并使用 http://localhost 访问它可能会更容易。

关于javascript - 如何从系统获取图像以加载到html5的canvas中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11644192/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com