我最终使用了一个返回Promise的函数。

const getImg64 = async() => { const convertImgToBase64URL = (url) => { console.log(url) return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = () => { let canvas = document.createElement('CANVAS') const ctx = canvas.getContext('2d') canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); const dataURL = canvas.toDataURL(); canvas = null; resolve(dataURL) } img.src = url; }) } //for the demonstration purposes I used proxy server to avoid cross origin error const proxyUrl = 'https://cors-anywhere.herokuapp.com/' const image = await convertImgToBase64URL(proxyUrl+'https://image.shutterstock.com/image-vector/vector-line-icon-hello-wave-260nw-1521867944.jpg') console.log(image) } getImg64()

你可以在任何异步函数中使用这种方法。然后，您只需等待转换后的图像并继续执行指示即可。

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

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

你可以使用HTML5 <canvas>:

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

如果您使用的是Dojo Toolkit，那么它为我们提供了一种直接编码或解码Base64的方法。

试试这个:

使用dojox.encoding.base64对字节数组进行编码:

var str = dojox.encoding.base64.encode(myByteArray);

解码一个base64编码的字符串:

var bytes = dojox.encoding.base64.decode(str);

有多种方法可供选择:

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

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