在JavaScript中获取图像数据?

我有一个常规的HTML页面(只是普通的<img /> HTML标签)。 我希望得到他们的内容,最好base64编码,而不需要重新下载图像(即它已经加载的浏览器,所以现在我想要的内容)。

我很想用Greasemonkey和Firefox来实现。

注意:这只适用于图像来自与页面相同的域,或具有crossOrigin="anonymous"属性且服务器支持CORS的情况。 这也不会给你原来的文件,而是一个重新编码的版本。 如果你需要的结果是与原来的相同,请参阅Kaiido的答案 。


您将需要创build具有正确尺寸的canvas元素,并使用drawImage函数复制图像数据。 然后,您可以使用toDataURL函数来获取具有base-64编码图像的data:url。 请注意,图像必须完全加载,否则您只需返回空的(黑色,透明)图像。

这将是这样的。 我从来没有写过Greasemonkey脚本,因此您可能需要调整代码以在该环境中运行。

 function getBase64Image(img) { // Create an empty canvas element var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; // Copy the image contents to the canvas var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); // Get the data-URL formatted image // Firefox supports PNG and JPEG. You could check img.src to // guess the original format, but be aware the using "image/jpg" // will re-encode the image. var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); } 

获取JPEG格式的图像不适用于Firefox的较旧版本(大约3.5),因此如果您想要支持这一点,则需要检查兼容性。 如果编码不被支持,它将默认为“image / png”。

这个函数获取URL然后返回图像BASE64

 function getBase64FromImageUrl(url) { var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.onload = function () { var canvas = document.createElement("canvas"); canvas.width =this.width; canvas.height =this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL("image/png"); alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); }; img.src = url; } 

像这样调用它: getBase64FromImageUrl("images/slbltxt.png")

除了matthew的回答之外,我想说image.width和image.height返回图片的显示尺寸(并在绘制到canvas上时剪裁图片)

使用naturalWidth和naturalHeight,而使用实际大小的图片。

http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#dom-img-naturalwidth

很久以后,但这里没有一个答案是完全正确的。

在canvas上绘制时,传递的图像是未压缩的+全部预先倍增的。
当输出时,其解压缩或用不同的algorithm重新压缩,并且不相乘。

所有的浏览器和设备在这个过程中都会有不同的舍入错误
(请参阅“ canvas指纹” )。

所以如果想要一个base64版本的图像文件,他必须再次请求 (大部分时间来自caching),但这次是Blob。

然后,您可以使用FileReader将其读取为ArrayBuffer或dataURL。

 function toDataURL(url, callback){ var xhr = new XMLHttpRequest(); xhr.open('get', url); xhr.responseType = 'blob'; xhr.onload = function(){ var fr = new FileReader(); fr.onload = function(){ callback(this.result); }; fr.readAsDataURL(xhr.response); // async call }; xhr.send(); } toDataURL(myImage.src, function(dataURL){ result.src = dataURL; // now just to show that passing to a canvas doesn't hold the same results var canvas = document.createElement('canvas'); canvas.width = myImage.naturalWidth; canvas.height = myImage.naturalHeight; canvas.getContext('2d').drawImage(myImage, 0,0); console.log(canvas.toDataURL() === dataURL); // false - not same data }); 
 <img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous"> <img id="result"> 

一个更现代的版本的kaiido的回答使用获取将是:

 function toDataURL(url) { return fetch(url) .then((response)=> { return response.blob(); }) .then(blob=> { return URL.createObjectURL(blob); }); } 

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch