我需要将我的图像转换为Base64字符串，这样我就可以将我的图像发送到服务器。
有JavaScript文件吗?否则，我如何转换它?
当前回答
你也可以简单地提取以64为基数的URL的一部分:
var Base64URL = canvas.toDataURL('image/webp')
var Base64 = Base64URL.split(",")[1] //Returns the base64 part
其他回答
您可以使用FileAPI，但它几乎不受支持。
你可以使用HTML5 <canvas>:
创建一个画布，将图像加载到其中，然后使用toDataURL()来获得Base64表示(实际上，它是一个data: URL，但它包含Base64编码的图像)。
如果你有一个文件对象，这个简单的函数将工作:
function getBase64 (file, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(file);
}
使用的例子:
getBase64(fileObjectFromInput, function(base64Data){
console.log("Base64 of file is", base64Data); // Here you can have your code which uses Base64 for its operation, // file to Base64 by oneshubh
});
基本上，如果你的形象是
<img id='Img1' src='someurl'>
然后你可以把它转换成
var c = document.createElement('canvas');
var img = document.getElementById('Img1');
c.height = img.naturalHeight;
c.width = img.naturalWidth;
var ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0, c.width, c.height);
var base64String = c.toDataURL();
需要利用读取器将blob转换为base64，更喜欢使用async-await语法，所以我选择提取读取器逻辑到帮助器，像这样:
//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
return new Promise((resolve) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.readAsDataURL(blob)
})
}
并在主代码中使用await调用它:
//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)
