我可以从JavaScript访问img标记的数据文件吗
我想从JavaScript中作为变量访问作为img标记中的图像加载的文件 我不想访问它的名称,但要访问实际数据。 这样做的原因是,我希望能够将其复制到变量中或从变量中复制,这样,除其他外,我可以在不重新加载图像的情况下更改图像 这能做到吗?如果是,怎么做 注意:我对读取数据比编写数据更感兴趣。试试以下方法:我可以从JavaScript访问img标记的数据文件吗,javascript,html,image,Javascript,Html,Image,我想从JavaScript中作为变量访问作为img标记中的图像加载的文件 我不想访问它的名称,但要访问实际数据。 这样做的原因是,我希望能够将其复制到变量中或从变量中复制,这样,除其他外,我可以在不重新加载图像的情况下更改图像 这能做到吗?如果是,怎么做 注意:我对读取数据比编写数据更感兴趣。试试以下方法: img = new Image(); img.src = "imagefile.jpg"; 有些浏览器支持,但不是全部。这看起来像: <img src="data:image/gi
img = new Image();
img.src = "imagefile.jpg";
有些浏览器支持,但不是全部。这看起来像:
<img src="data:image/gif;base64,R0lGODl......j5+g4JADs=">
当您这样做时,您至少可以假访问实际数据,但正如我所说的,它不是100%支持的。除此之外,不可能
真正的问题是:你想要实现什么?大多数情况下(95%,可能更多)重复的图像重新加载都会被浏览器缓存捕获,在这种情况下,仅修改img.src具有相同的效果,并且不会导致网络流量(如果这是您所担心的).您可以使用画布将img标记的图像绘制到HTML画布上。drawImage您可以尝试使用AJAX下载图像,但可能会遇到跨域脚本限制 我不知道访问图像数据的其他方法。
//使用AJAX下载图像数据,我使用jQuery
// 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 + '">');
var-imageData=$.ajax({url:MyImage.gif',async:false});
//图像数据更新魔术
imageDataChanged=更改图像(imageData);
//编码到base64,可以尝试webtoolkit.base64.js库
imageDataEncoded=Base64Encode(imageDataChanged);
//将图像数据写入浏览器(FF似乎支持此功能)
文件。写(“”);
如果您使用的是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)我知道如何访问图像的名称。但这不是我想做的。如果你想知道我在做什么,我也会问:我想你的意思是“我不想访问它的名称”,而不是“我不想访问它的名称”。为什么“它”的所有格“它”不同于所有格“其他所有东西”?:bBTW:出于安全考虑,使用来自另一个域的图像将“污染”画布,并禁止读取像素数据……这是迄今为止我见过的最酷的事情