logo标签列表

如何使用JavaScript将图像转换为Base64字符串？

javascriptbase64
733

我需要将我的图片转换为Base64字符串，以便将图片发送到服务器。

是否有适用于此的JavaScript文件？否则，我该如何进行转换？

5
你的形象来源是哪里？ - TJHeuvel
6
以下是翻译的内容：如何在 JavaScript 中获取图像数据？我正在尝试从一个图像中获取像素数据，以便通过 Canvas 对其进行处理。有没有一种方法可以在 JavaScript 中获取图像的像素数据？谢谢！ - duri
1
JS和jQ：https://dev59.com/questions/T2Mm5IYBdhLWcg3wT9qU - Roko C. Buljan
https://idkblogs.com/js/31/Convert-image-file-into-base64-in-javascript - Shubham Verma
21个回答
5
据我所知，可以通过FileReader()将图像转换为Base64字符串，或者将其存储在画布元素中，然后使用toDataURL()获取图像。我曾经遇到过类似的问题，您可以参考这个链接：Convert an image to canvas that is already loaded

5
您可以使用FileAPI，但它的支持程度非常有限。
4

尝试使用以下代码：

对于文件上传变更事件，请调用此函数：

$("#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数据存储在隐藏字段中以便使用。
1
嗨，Ravi！我看到你是相对较新的。除非原帖明确要求使用类库解决方案，如jQuery、lodash等，否则最好每个人都使用最基本的方式回答，即在这种情况下使用纯JavaScript。如果您仍然想用jQuery做出贡献，请在您的条目中明确说明 :) - Neithan Max
3

如果你遇到跨域错误，可以使用一个名为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);
    }));
  }
这安全吗？CORS-Fix 的背景资料是什么？ - Jtaw Cañada
2

document.querySelector('input').onchange = e => {
  const fr = new FileReader()
  fr.onloadend = () => document.write(fr.result)
  fr.readAsDataURL(e.target.files[0])
}
<input type="file">

2

需要使用读取器将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)
1

假设您正在浏览器中进行此操作：

使用 await：

import axios from 'axios'

const response = await axios.get(url, { responseType: 'blob' });
return window.URL.createObjectURL(response.data);

使用 Promise

import axios from 'axios'

const response = await axios.get(url, { responseType: 'blob' })
  .then((response) => {
    const dataUrl = window.URL.createObjectURL(response.data);
    // do something with your url
  });
1
这是一个被低估的评论！我一直在使用手动btoa、TextEncoder等时遇到各种错误...当使用axios时，这就是*答案。生活可以如此简单！ - OGordo
1
现在最简单的方法之一是使用ArrayBuffer来获取一个base64字符串。
在服务器端的代码中，你可以使用Buffer。
const arrayBufferToBase64 = (arrayBuffer) =>
  Buffer.from(arrayBuffer).toString("base64");

在客户端代码中，您可以使用和。
const arrayBufferToBase64 = (arrayBuffer) =>
  btoa(String.fromCodePoint(...new Uint8Array(arrayBuffer)));
不确定如何获取一个ArrayBuffer对象？以下是一些示例：
  // from `fetch`
  const arrayBuffer = await fetch('...').then(res => res.arrayBuffer())
  // from `File | Blob` object
  const arrayBuffer = await fileOrBlob.arrayBuffer()
  // from `axios`
  const arrayBuffer = await axios.request({ responseType: "arraybuffer" }).then({ data } => data)
给这个家伙加薪 - undefined
0
这非常简单。 1> 只需调用函数并传入您的图像。 2> 保存返回值并在需要的地方使用。
//call like this
const convertedFile = await imageToBase64(fileObj);
console.log("convertedFile",convertedFile);

//this is the required function

 async function  imageToBase64(image) {
 const reader = new FileReader();
 reader.readAsDataURL(image);
 const data= await new Promise((resolve, reject) => {

   reader.onload = () => resolve(reader.result);

   reader.onerror = error => reject(error);

  });
return data;
}

export default imageToBase64;
0

你也可以通过以下方式仅提取URL的base-64部分：

var Base64URL = canvas.toDataURL('image/webp')
var Base64 = Base64URL.split(",")[1] //Returns the base64 part
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接