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 个答案: