如何使用JavaScript访问本地资源？

Question

我想访问在网站上时存储在Web浏览器中的本地资源/文件。 我试图为每次使用JS访问站点时加载的图像生成dataURI，并在控制台日志中打印相同的图像。

注意：该图像是从远程服务器上下载的，并不存储在本地。

有什么建议/方法可以做到这一点吗？ 有什么方法可以直接从浏览器资源访问.jpeg，.png等？

这是示例网站的代码，我正在尝试

<html>
<head>
    <title>Image_split</title>
</head>
<body>
    <h1>Splitting images within the browser</h1>
    <br><hr><br>
    <img src="https://www.google.co.in/images/srpr/logo11w.png" />
    <br><hr><br>
    <p id="split_result"></p>

    <br><hr><br>

    <script src="image_split.js"></script>
</body>

这是JS

var image_elements = document.getElementsByTagName("img");

var i;
var count=0;
for(i=0;i<image_elements.length; i++){
    count++;
}

var image = image_elements[0];

/*if(count>0){
    document.getElementById("split_result").innerHTML = image_elements[0];
}*/

//The code below does not work :(
/*
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 100, 100);
document.getElementById("split_result").innerHTML = canvas.toDataURL("image/png");
*/

我想直接从本地缓存访问image_elements [0]中存储的图像，并使用JS对其进行修改。

！[链接到图像] https://drive.google.com/file/d/0B7UeFzC7IXYaODN0SWhGZlp2dnc/view?usp=sharing

谢谢：）

Answer 1

这是在不获取'HTMLCanvasElement'的情况下从Web浏览器资源访问图像的解决方案代码：可能无法导出污染的画布。

var image_elements = document.getElementsByTagName("img");

var i;
var count=0;
for(i=0;i<image_elements.length; i++){
    count++;
}

var image = image_elements[0];

window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt){ 
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    //canvas.getContext("2d").drawImage(image, 0, 0);
    var dataModel = canvas.getContext("2d").getImageData(0, 0, image.width, image.height);
    document.getElementById("split_result").innerHTML = dataModel.data.byteLength;
}

如何使用JavaScript访问本地资源？

问题描述

1 个解决方案

解决方案1
0 2015-05-30 14:10:01

如何使用JavaScript访问本地资源？

问题描述

1 个解决方案

解决方案1 0 2015-05-30 14:10:01

解决方案1
0 2015-05-30 14:10:01