我需要将我的图像转换为Base64字符串,这样我就可以将我的图像发送到服务器。

有JavaScript文件吗?否则,我如何转换它?


当前回答

uploadProfile(e) {

    let file = e.target.files[0];
    let reader = new FileReader();

    reader.onloadend = function() {
        console.log('RESULT', reader.result)
    }
    reader.readAsDataURL(file);
}

其他回答

你可以使用HTML5 <canvas>:

创建一个画布,将图像加载到其中,然后使用toDataURL()来获得Base64表示(实际上,它是一个data: URL,但它包含Base64编码的图像)。

据我所知,图像可以通过FileReader()转换为Base64字符串,也可以将其存储在canvas元素中,然后使用toDataURL()获取图像。我也遇到过类似的问题你可以参考这个。

将图像转换为已经加载的画布

如果你有一个文件对象,这个简单的函数将工作:

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
});
uploadProfile(e) {

    let file = e.target.files[0];
    let reader = new FileReader();

    reader.onloadend = function() {
        console.log('RESULT', reader.result)
    }
    reader.readAsDataURL(file);
}

基本上,如果你的形象是

<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();