廢話不多說，直接上代碼
base64 (url) {
return new Promise((resolve) => {
const image = new Image()
// 先設(shè)置圖片跨域?qū)傩? image.crossOrigin = 'Anonymous'
// 再給image賦值src屬性，先后順序不能顛倒
image.src = url
image.onload = function () {
const canvas = document.createElement('CANVAS')
// 設(shè)置canvas寬高等于圖片實(shí)際寬高
canvas.width = image.width
canvas.height = image.height
canvas.getContext('2d').drawImage(image, 0, 0)
// toDataUrl可以接收2個(gè)參數(shù)，參數(shù)一：圖片類型，參數(shù)二： 圖片質(zhì)量0-1（不傳默認(rèn)為0.92）
const dataURL = canvas.toDataURL('image/jpeg')
resolve(dataURL)
}
image.onerror = () => {
resolve({ message: '相片處理失敗' })
}
})
},我們傳入一個(gè)圖
async mounted () {
// this.init()
const url = await this.base64('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg')
console.log(url)
},片地址看看是否成功?
但是，一般我們?cè)谧鲞@樣的需求前，處理的圖片肯定不止一張，接下來就要批量處理，但是這個(gè)方法是異步，我們要將一個(gè)數(shù)組內(nèi)的每個(gè)對(duì)象的地址都轉(zhuǎn)成base64,才算真正完成我們的功能。前端一般接收到后端的數(shù)據(jù)一般是這種格式。
?但是我們正常使用map函數(shù)遍歷去將圖片地址轉(zhuǎn)成base64，上代碼：
const newImgOBj = await Promise.all(this.imgOBj.map(async (item) => {
return {
name: item.name,
img: await this.base64(item.img)
}
}))
console.log(newImgOBj)打印一下看結(jié)果發(fā)現(xiàn)我們的圖片地址已經(jīng)變成了base64編碼。
文章來源：http://www.zghlxwxcb.cn/news/detail-755709.html
最后我們將圖片使用img標(biāo)簽正常渲染就好了，小知識(shí)：瀏覽器在識(shí)別同一個(gè)一模一樣的圖片地址，瀏覽器只會(huì)請(qǐng)求一遍該圖片資源哦。?文章來源地址http://www.zghlxwxcb.cn/news/detail-755709.html
到了這里，關(guān)于前端實(shí)現(xiàn)圖片轉(zhuǎn)Base64的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
