我可以从JavaScript访问img标记的数据文件吗

// Download the image data using AJAX, I'm using jQuery
var imageData = $.ajax({ url: "MyImage.gif", async: false }).responseText;

// Image data updating magic
imageDataChanged = ChangeImage(imageData);

// Encode to base64, maybe try the webtoolkit.base64.js library
imageDataEncoded = Base64Encode(imageDataChanged);

// Write image data out to browser (FF seems to support this)
document.write('<img src="data:image/gif;base64,' + imageDataEncoded + '">');

如果您使用的是Firefox(我想是Opera,也可能是Safari;我现在无法检查),您可以在画布元素上绘制图像并使用getImageData。

它的工作原理是这样的:

var img = document.getElementById("img_id");
var canvas = document.getElementById("canvas_id");
var context = canvas.getContext("2d");

var imageData = context.getImageData(0, 0, context.width, context.height);

// Now imageData is an object with width, height, and data properties.
// imageData.data is an array of pixel values (4 values per pixel in RGBA order)

// Change the top left pixel to red
imageData.data[0] = 255; // red
imageData.data[1] = 0;   // green
imageData.data[2] = 0;   // blue
imageData.data[3] = 255; // alpha

// Update the canvas
context.putPixelData(imageData, 0, 0);

获得图像数据后,可以计算每个像素的起始索引:

var index = (y * imageData.width + x) * 4;

并为每个通道添加偏移量(0表示红色,1表示绿色,2表示蓝色,3表示alpha)

一些浏览器支持 a Base64 encoded string as the img src

<img src="data:image/gif;base64,R0lGODl......j5+g4JADs=">

当你这样做的时候,你至少可以 伪造的 访问实际数据,但正如我所说,它不是100%支持。除此之外,不可能。

真正的问题是:你想要实现什么?大多数情况下(95%,可能更多)重复的图像重新加载都会被浏览器缓存捕获,在这种情况下,仅修改img.src具有相同的效果,并且不会导致网络流量(如果这是您所担心的)。

您可以尝试使用AJAX下载图像,但可能会遇到跨域脚本限制。

我不知道还有其他访问图像数据的方法。

img = new Image(); 
img.src = "imagefile.jpg";