试试下面的代码:

对于文件上传更改事件，调用这个函数:

$("#fileproof").on('change', function () {
    readImage($(this)).done(function (base64Data) { $('#<%=hfimgbs64.ClientID%>').val(base64Data); });
});

function readImage(inputElement) {
    var deferred = $.Deferred();

    var files = inputElement.get(0).files;

    if (files && files[0]) {
        var fr = new FileReader();
        fr.onload = function (e) {
            deferred.resolve(e.target.result);
        };
        fr.readAsDataURL(files[0]);
    } else {
        deferred.resolve(undefined);
    }

    return deferred.promise();
}

存储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
});

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

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

document.querySelector(“输入”)。Onchange = e => { const fr = new FileReader() Fr.onloadend = () => document.write(fr.result) fr.readAsDataURL (e.target.files [0]) ｝ < input type = " file " >

如果您遇到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);
    }));
  }

你也可以简单地提取以64为基数的URL的一部分:

var Base64URL = canvas.toDataURL('image/webp')
var Base64 = Base64URL.split(",")[1] //Returns the base64 part