我有一个带有一些图像的常规HTML页面(只是常规的<img />
HTML标签)。我想得到他们的内容,优选base64编码,而不需要重新下载图像(即它已经被浏览器加载,所以现在我想要内容)。
我很想用Greasemonkey和Firefox实现这一目标。
注意:这仅在图像来自与页面相同的域中,或者具有crossOrigin="anonymous"
属性且服务器支持CORS时才有效。它也不会给你原始文件,而是一个重新编码的版本。如果您需要的结果与原始结果相同,请参阅Kaiido's answer。
您需要创建具有正确尺寸的canvas元素,并使用drawImage
函数复制图像数据。然后你可以使用toDataURL
函数来获取数据:具有base-64编码图像的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")
很久以后,但这里没有一个答案是完全正确的。
在画布上绘制时,传递的图像未压缩+全部预乘。 导出时,使用不同的算法对其进行未压缩或重新压缩,并且不成倍增加。
所有浏览器和设备在此过程中都会发生不同的舍入错误 (见Canvas fingerprinting)。
因此,如果想要一个base64版本的图像文件,他们必须再次请求它(大部分时间它将来自缓存),但这次是一个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">
除了matthew的答案之外,我想说image.width和image.height返回图片的显示大小(并在绘制到画布时裁剪图像)
使用naturalWidth和naturalHeight代替,它使用实际尺寸的图片。
见http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#dom-img-naturalwidth
使用fetch的更现代版本的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
加载后使用onload
事件转换图像
function loaded(img) {
let c = document.createElement('canvas')
c.getContext('2d').drawImage(img, 0, 0)
msg.innerText= c.toDataURL();
}
pre { word-wrap: break-word; width: 500px; white-space: pre-wrap; }
<img onload="loaded(this)" src="https://cors-anywhere.herokuapp.com/http://lorempixel.com/200/140" crossorigin="anonymous"/>
<pre id="msg"></pre>
function encodeImageFileAsURL(cb) {
return function() {
var file = this.files[0];
var reader = new FileReader();
reader.onloadend = function() {
cb(reader.result);
}
reader.readAsDataURL(file);
}
}
$('#inputFileToLoad').change(encodeImageFileAsURL(function(base64Img) {
$('.output')
.find('textarea')
.val(base64Img)
.end()
.find('a')
.attr('href', base64Img)
.text(base64Img)
.end()
.find('img')
.attr('src', base64Img);
}));
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); body{ padding: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Input</h2>
<form class="input-group" id="img2b64">
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
</form>
<hr>
在HTML5中更好地使用这个:
{
//...
canvas.width = img.naturalWidth; //img.width;
canvas.height = img.naturalHeight; //img.height;
//...
}