我希望从JavaScript中将作为图像加载的文件作为变量访问img标记。
这样做的原因是我希望能够将变量复制到变量和从变量复制,以便我可以在不重新加载图像的情况下更改图像。
可以这样做吗?如果是这样,怎么样?
注意:我对读取数据稍微感兴趣而不是写它。
答案 0 :(得分:8)
// 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 + '">');
答案 1 :(得分:2)
如果您正在使用Firefox(我认为Opera和Safari;我现在无法检查),您可以在canvas元素上绘制图像并使用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)
答案 2 :(得分:1)
有些浏览器支持a Base64 encoded string as the img src,但不是全部。这看起来像是:
<img src="data:image/gif;base64,R0lGODl......j5+g4JADs=">
当你这样做时,你可以在假访问实际数据,但正如我所说,它不是100%支持。除此之外 - 没办法。
真正的问题是:你想要达到什么目的?大多数时候(95%,可能更多)重复的图像重新加载被浏览器缓存捕获,在这种情况下,只修改img.src具有相同的效果并且不会导致网络流量(如果这是你担心的话)。 / p>
答案 3 :(得分:1)
您可以使用canvas.drawImage
将img标记的图像绘制到HTML画布上答案 4 :(得分:0)
您可以尝试使用AJAX下载图像,但之后您可能会遇到跨域脚本限制。
其他访问图像数据的方法我不知道。
答案 5 :(得分:-1)
试试这个:
img = new Image();
img.src = "imagefile.jpg";