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

您可以选择多种方法：

1.方法：文件阅读器

通过 XMLHttpRequest 将图像加载为 blob 并使用 FileReader API (readAsDataURL()) 将其转换为 dataURL：

函数 toDataURL(url, 回调) { var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); } toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) { console.log('RESULT:', dataUrl) })

此代码示例也可以使用 WHATWG fetch API 实现：

const toDataURL = url => fetch(url) .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result) reader.onerror = reject reader.readAsDataURL(blob) })) toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0') .then(dataUrl => { 控制台.log('结果:', dataUrl) })

这些方法：

缺乏浏览器支持

有更好的压缩

也适用于其他文件类型

浏览器支持：

http://caniuse.com/#feat=filereader

http://caniuse.com/#feat=fetch

2.方法：帆布

将图像加载到 Image-Object 中，将其绘制到未污染的画布上并将画布转换回 dataURL。

函数 toDataURL(src, callback, outputFormat) { var img = new Image(); img.crossOrigin = '匿名'; img.onload = function() { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d');变量数据URL； canvas.height = this.naturalHeight; canvas.width = this.naturalWidth; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat);回调（数据URL）； }; 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) } )

In detail

支持的输入格式：

image/png、image/jpeg、image/jpg、image/gif、image/bmp、image/tiff、image/x-icon、image/svg+xml、image/webp、image/xxx

支持的输出格式：

image/png、image/jpeg、image/webp（铬）

浏览器支持：

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(); reader.onloadend = function() { console.log('RESULT', reader.result) } reader.readAsDataURL(file); }

---

您可以使用 HTML5 <canvas>：

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

---

该片段可以将您的字符串、图像甚至视频文件转换为 Base64 字符串数据。