vue圖片轉(zhuǎn)base64格式的方法示例
1.require的方式
用vue引入圖片的require方式獲取的值可以直接生成base64格式,但是該方法只適用于5kb大小以下的圖片
const path = require('@/assets/images/test.png')
2.canvas.toDataURL()
該方法canvas.toDataURL(`image/${ext}`)傳入的圖片類型是什么生成后的base64數(shù)據(jù)前綴就是什么類型,如果傳入的類型和生成的類型不同,則表示該方法不支持該類型的圖片,例如gif圖片轉(zhuǎn)換后是png
imgUrlToBase64(url) { return new Promise((resolve, reject) => { if (!url) { reject('請傳入url內(nèi)容') } if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) { // 圖片地址 const image = new Image() // 設(shè)置跨域問題 image.setAttribute('crossOrigin', 'anonymous') // 圖片地址 image.src = url image.onload = () => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') canvas.width = image.width canvas.height = image.height ctx.drawImage(image, 0, 0, image.width, image.height) // 獲取圖片后綴 const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase() // 轉(zhuǎn)base64 const dataUrl = canvas.toDataURL(`image/${ext}`) resolve(dataUrl || '') } } else { // 非圖片地址 reject('非(png/jpe?g/gif/svg等)圖片地址'); } }) },
3.FileReader.readAsDataURL()
getBase64(imgUrl) { return new Promise((resolve, reject) => { if (!imgUrl) { reject('請傳入imgUrl內(nèi)容') } if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(imgUrl)) { window.URL = window.URL || window.webkitURL var xhr = new XMLHttpRequest() xhr.open('get', imgUrl, true) xhr.responseType = 'blob' xhr.onload = function() { if (this.status == 200) { // 得到一個(gè)blob對象 var blob = this.response const oFileReader = new FileReader() oFileReader.onloadend = function(e) { const base64 = e.target.result resolve(base64 || '') } oFileReader.readAsDataURL(blob) } } xhr.send() } else { // 非圖片地址 reject('非(png/jpe?g/gif/svg等)圖片地址') } }) },
總結(jié)
到此這篇關(guān)于vue圖片轉(zhuǎn)base64格式的文章就介紹到這了,更多相關(guān)vue圖片轉(zhuǎn)base64格式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue學(xué)習(xí)筆記之slot插槽基本用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽基本用法,結(jié)合實(shí)例形式分析了vue slot插槽基本使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02淺談Vue.js 關(guān)于頁面加載完成后執(zhí)行一個(gè)方法的問題
這篇文章主要介紹了Vue.js 關(guān)于頁面加載完成后執(zhí)行一個(gè)方法的問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Vue中使用ElementUI使用第三方圖標(biāo)庫iconfont的示例
這篇文章主要介紹了Vue中使用ElementUI使用第三方圖標(biāo)庫iconfont的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧
這篇文章主要介紹了vue數(shù)據(jù)傳遞一些特殊梳理技巧,需要的朋友可以參考下2018-03-03