我要评论
第一种：blob和filereader 对象
实现原理：
使用xhr请求图片,并设置返回的文件类型为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的2种方法代码的文章就介绍到这了,更多相关js图片转base64内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论