我需要将我的图像转换为Base64字符串,这样我就可以将我的图像发送到服务器。
有JavaScript文件吗?否则,我如何转换它?
我需要将我的图像转换为Base64字符串,这样我就可以将我的图像发送到服务器。
有JavaScript文件吗?否则,我如何转换它?
当前回答
下面是使用Javascript Promise的方法。
const getBase64 = (file) => new Promise(function (resolve, reject) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result)
reader.onerror = (error) => reject('Error: ', error);
})
现在,在事件处理程序中使用它。
const _changeImg = (e) => {
const file = e.target.files[0];
let encoded;
getBase64(file)
.then((result) => {
encoded = result;
})
.catch(e => console.log(e))
}
其他回答
uploadProfile(e) {
let file = e.target.files[0];
let reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
据我所知,图像可以通过FileReader()转换为Base64字符串,也可以将其存储在canvas元素中,然后使用toDataURL()获取图像。我也遇到过类似的问题你可以参考这个。
将图像转换为已经加载的画布
如果您遇到cors源错误,有一个简单的代理,称为cors-fix,它在服务器上加载图像并将其作为缓冲区数组返回。
因此,我们可以使用fetch来获取图像数据,并使用filereader将其转换为dataUrl,如@HaNdTriX所述。
function toDataUrl(url) {
fetch(`https://cors-fix.web.app/v1?url=${url}`)
.then(data => data.blob().then(blob => {
const reader = new FileReader();
reader.onloadend = () => {
console.log(reader.result);
};
reader.onerror = () => {
console.log('reader error');
};
reader.readAsDataURL(blob);
}));
}
我最终使用了一个返回Promise的函数。
const getImg64 = async() => { const convertImgToBase64URL = (url) => { console.log(url) return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = () => { let canvas = document.createElement('CANVAS') const ctx = canvas.getContext('2d') canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); const dataURL = canvas.toDataURL(); canvas = null; resolve(dataURL) } img.src = url; }) } //for the demonstration purposes I used proxy server to avoid cross origin error const proxyUrl = 'https://cors-anywhere.herokuapp.com/' const image = await convertImgToBase64URL(proxyUrl+'https://image.shutterstock.com/image-vector/vector-line-icon-hello-wave-260nw-1521867944.jpg') console.log(image) } getImg64()
你可以在任何异步函数中使用这种方法。然后,您只需等待转换后的图像并继续执行指示即可。
有多种方法可供选择:
1. 方法:FileReader
通过XMLHttpRequest加载图像为blob,并使用FileReader API (readAsDataURL())将其转换为dataURL:
函数toDataURL(url,回调){ var xhr = new XMLHttpRequest(); xhr。Onload = function() { var reader = new FileReader(); 读者。Onloadend = function() { 回调(reader.result); } reader.readAsDataURL (xhr.response); }; xhr。打开(‘得到’,url); xhr。responseType = 'blob'; xhr.send (); } toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',函数(dataUrl) { dataUrl console.log('结果:') })
这个代码示例也可以使用WHATWG获取API来实现:
const toDataURL => .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() 读者。Onloadend = () => resolve(reader.result) 读者。Onerror =拒绝 reader.readAsDataURL (blob) })) toDataURL(“https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0”) .then(dataUrl => { dataUrl console.log('结果:') })
这些方法:
有更好的压缩 也适用于其他文件类型
浏览器支持:
http://caniuse.com/#feat=filereader http://caniuse.com/#feat=fetch
2. 方法:Canvas(适用于旧浏览器)
将图像加载到image - object中,将其绘制到未受污染的画布上,并将画布转换回dataURL。
function toDataURL(src, callback, outputFormat) { var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var dataURL; canvas.height = this.naturalHeight; canvas.width = this.naturalWidth; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat); callback(dataURL); }; img.src = src; if (img.complete || img.complete === undefined) { img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = src; } } toDataURL( 'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) { console.log('RESULT:', dataUrl) } )
详细
支持的输入格式:
图像/PNG, 图像/JPEG, 图像/JPG, 图像/gif, 图像/BMP, 图像/tiff, 图像/x-icon, 图像/SVG+XML, 图像/WebP, 图像/XXX
支持的输出格式:
图像/PNG, 图像/JPEG, 图像/WebP(Chrome)
浏览器支持:
http://caniuse.com/#feat=canvas Internet Explorer 10 (Internet Explorer 10只能处理相同来源的图像)
3.方法:来自本地文件系统的映像
如果您想从用户文件系统转换映像,则需要采用不同的方法。 使用FileReader API:
函数encodeImageFileAsURL(element) { Var file = element.files[0]; var reader = new FileReader(); 读者。Onloadend = function() { console.log(“结果”,reader.result) } reader.readAsDataURL(文件); } <input type="file" onchange="encodeImageFileAsURL(this)"/>