如何从系统中获取图像画布上加载HTML5

CODE

<!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>

我想在画布上加载此图像。在imageObj.src中传递图片URL是否正确？

或者有没有其他的方法来加载图像？

由于事先

来源

2012-07-25 Shanky

你已经几乎权利。如果您是在本地加载文件，你需要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:协议。

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

来源

2012-07-25 07:26:57 apsillers

谢谢你回答apsillers，这对我来说现在正确。但是当我使用这个属性时，它会变得失败。 \t var imageData = context.getImageData（mx，my，1，1）; MX和我的鼠标位置 – Shanky 2012-07-25 09:36:48

@Shanky很高兴我能帮上忙。不幸的是，我认为关于'getImageData'的后续问题太复杂了，无法在评论中快速回答。一般来说，在Stack Overflow中，如果你的程序有一个新的问题，只需打开一个新的问题！ – apsillers 2012-07-25 11:38:56

而且，只是一个疯狂的猜测 - 也许[这个链接]（http://stackoverflow.com/questions/1040724/how-do-i-bypass-a-same-origin-policy-violation-for-one-local文件到另一个）将解决你的问题？再一次，你应该开一个新的问题，但也许这个链接会给你一个问题的起点（或者帮你完全自己解决问题）。 – apsillers 2012-07-25 11:41:43

如何从系统中获取图像画布上加载HTML5

回答

相关问题