我有一个带有一些图像的常规HTML页面(只是常规的<img /> HTML标签)。我想得到他们的内容,base64编码最好,而不需要重新下载图像(即。它已经被浏览器加载,所以现在我想要的内容)。
我希望通过Greasemonkey和Firefox实现这一目标。
我有一个带有一些图像的常规HTML页面(只是常规的<img /> HTML标签)。我想得到他们的内容,base64编码最好,而不需要重新下载图像(即。它已经被浏览器加载,所以现在我想要的内容)。
我希望通过Greasemonkey和Firefox实现这一目标。
当前回答
注意:只有当图像与页面来自相同的域,或者具有crossOrigin="anonymous"属性,并且服务器支持CORS时,这才有效。它也不会给你原始文件,而是一个重新编码的版本。如果您需要结果与原始相同,请参阅Kaiido的回答。
您需要创建一个具有正确尺寸的画布元素,并使用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,/, "");
}
在旧版本(3.5左右)的Firefox上无法获取jpeg格式的图像,因此如果您希望支持该格式,则需要检查兼容性。如果编码不支持,它将默认为“image/png”。
其他回答
注意:只有当图像与页面来自相同的域,或者具有crossOrigin="anonymous"属性,并且服务器支持CORS时,这才有效。它也不会给你原始文件,而是一个重新编码的版本。如果您需要结果与原始相同,请参阅Kaiido的回答。
您需要创建一个具有正确尺寸的画布元素,并使用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,/, "");
}
在旧版本(3.5左右)的Firefox上无法获取jpeg格式的图像,因此如果您希望支持该格式,则需要检查兼容性。如果编码不支持,它将默认为“image/png”。
Shiv / shim / sham
如果你的图像已经加载(或没有加载),这个“工具”可能会派上用场:
Object.defineProperty
(
HTMLImageElement.prototype,'toDataURL',
{enumerable:false,configurable:false,writable:false,value:function(m,q)
{
let c=document.createElement('canvas');
c.width=this.naturalWidth; c.height=this.naturalHeight;
c.getContext('2d').drawImage(this,0,0); return c.toDataURL(m,q);
}}
);
. .但是为什么呢?
这样做的好处是使用“已经加载”的图像数据,因此不需要额外的请求。此外,它还允许最终用户(像您这样的程序员)决定CORS和/或mime类型和质量- or -您可以省略MDN规范中描述的这些参数/参数。
如果你已经加载了这个JS(在需要它之前),那么转换为dataURL就像这样简单:
例子
HTML
<img src="/yo.jpg" onload="console.log(this.toDataURL('image/jpeg'))">
JS
console.log(document.getElementById("someImgID").toDataURL());
GPU指纹
如果您担心比特的“精确性”,那么您可以根据@Kaiido的回答修改这个工具以满足您的需求。
它的2022年,我更喜欢使用现代createImageBitmap()而不是onload事件。
*注意:图像应该是相同的来源或CORS启用
async function imageToDataURL(imageUrl) { let img = await fetch(imageUrl); img = await img.blob(); let bitmap = await createImageBitmap(img); let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); canvas.width = bitmap.width; canvas.height = bitmap.height; ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height); return canvas.toDataURL("image/png"); // image compression? // return canvas.toDataURL("image/png", 0.9); }; (async() => { let dataUrl = await imageToDataURL('https://en.wikipedia.org/static/images/project-logos/enwiki.png') wikiImg.src = dataUrl; console.log(dataUrl) })(); <img id="wikiImg">
这就是你需要阅读的全部内容。
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString
var height = 200;
var width = 200;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#090';
ctx.beginPath();
ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
ctx.stroke();
canvas.toBlob(function (blob) {
//consider blob is your file object
var reader = new FileReader();
reader.onload = function () {
console.log(reader.result);
}
reader.readAsBinaryString(blob);
});
kaiido使用fetch的更现代版本的答案是:
function toObjectUrl(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
编辑:正如评论中指出的那样,这将返回一个指向本地系统中的文件的对象url,而不是实际的DataURL,因此根据您的用例,这可能不是您所需要的。
您可以查看下面的答案来使用fetch和一个实际的dataURL: https://stackoverflow.com/a/50463054/599602