JS将图片转为Base64的两种实现方案
本文介绍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相关内容,建议搜索本站历史文章或继续阅读后续相关文章,感谢大家的支持!
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
