本文介绍JavaScript中将图片转换为Base64编码的两种常用方法。第一种利用XMLHttpRequest获取Blob对象，再通过FileReader读取为Base64；第二种通过Canvas绘制图片并调用toDataURL生成编码。文章同时提供了处理跨域问题的Vue代理配置示例，适用于前端图片处理场景。
第一种方法：利用Blob和FileReader对象
实现原理如下： 首先通过XMLHttpRequest发起图片请求，并将返回的数据类型设置为Blob对象（设置xhr.responseType为“blob”）。 随后使用FileReader对象来接收并处理该Blob数据。
return new Promise(resolve => {
let xhr = new XMLHttpRequest()
xhr.open('get', src, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status == 200) {
let blob = this.response
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
const base64 = e.target.result
resolve(base64)
}
oFileReader.readAsDataURL(blob)
}
}
xhr.send()
})第二种方法：使用canvas.toDataURL()
实现原理如下： 利用canvas的toDataURL()方法进行转换。 需要注意的是，此方法涉及图片跨域问题，需设置image.crossOrigin = ''以解决跨域限制。
return new Promise(resolve => {
const img = new Image()
img.crossOrigin = ''
img.src = src
img.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx?.drawImage(img, 0, 0, img.width, img.height)
const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
const dataURL = canvas.toDataURL('image/' + ext)
resolve(dataURL)
}补充说明：待转换的图片往往存在跨域限制，处理方式通常由后端或前端解决。本文示例中，在Vue环境下通过配置代理解决了跨域问题。
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://-----:8084'
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},总结
至此，关于JS将图片转换为Base64的两种方法介绍完毕。如需了解更多JS图片转Base64相关内容，建议搜索本站历史文章或继续阅读后续相关文章，感谢大家的支持！