-
require的方式
用vue引入图片的require方式获取的值可以直接生成base64格式,但是该方法只适用于5kb大小以下的图片
const path = require('@/assets/images/test.png')
-
canvas.toDataURL()
该方法canvas.toDataURL(`image/${ext}`)传入的图片类型是什么生成后的base64数据前缀就是什么类型,如果传入的类型和生成的类型不同,则表示该方法不支持该类型的图片,例如gif图片转换后是png
imgUrlToBase64(url) {return new Promise((resolve, reject) => {if (!url) {reject('请传入url内容')}if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) {// 图片地址const image = new Image()// 设置跨域问题image.setAttribute('crossOrigin', 'anonymous')// 图片地址image.src = urlimage.onload = () => {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')canvas.width = image.widthcanvas.height = image.heightctx.drawImage(image, 0, 0, image.width, image.height)// 获取图片后缀const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase()// 转base64const dataUrl = canvas.toDataURL(`image/${ext}`)resolve(dataUrl || '')}} else {// 非图片地址reject('非(png/jpe?g/gif/svg等)图片地址');}})},
-
FileReader.readAsDataURL()
getBase64(imgUrl) {return new Promise((resolve, reject) => {if (!imgUrl) {reject('请传入imgUrl内容')}if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(imgUrl)) {window.URL = window.URL || window.webkitURLvar xhr = new XMLHttpRequest()xhr.open('get', imgUrl, true)xhr.responseType = 'blob'xhr.onload = function() {if (this.status == 200) {// 得到一个blob对象var blob = this.responseconst oFileReader = new FileReader()oFileReader.onloadend = function(e) {const base64 = e.target.resultresolve(base64 || '')}oFileReader.readAsDataURL(blob)}}xhr.send()} else {// 非图片地址reject('非(png/jpe?g/gif/svg等)图片地址')}})},