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

以下是我所做的:

// Author James Harrington 2014
function base64(file, callback){
  var coolFile = {};
  function readerOnload(e){
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile)
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

下面是你如何使用它

base64( $('input[type="file"]'), function(data){
  console.log(data.base64)
})

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

这个代码片段可以将你的字符串、图像甚至视频文件转换为Base64字符串数据。

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> <div id="imgTest"></div> <script type='text/javascript'> function encodeImageFileAsURL() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("imgTest").innerHTML = newImage.outerHTML; alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); } fileReader.readAsDataURL(fileToLoad); } } </script>

有多种方法可供选择:

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)"/>

试试下面的代码:

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

$("#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数据在隐藏的字段使用。