目录1.require的方式2.canvas.toDataURL()3.FileReader.readAsDataURL()总结1.require的方式 用Vue引入图片的requi
用Vue引入图片的require方式获取的值可以直接生成base64格式,但是该方法只适用于5kb大小以下的图片
const path = require('@/assets/images/test.png')
该方法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 = 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()
// 转base64
const dataUrl = canvas.toDataURL(`image/${ext}`)
resolve(dataUrl || '')
}
} else {
// 非图片地址
reject('非(png/jpe?g/gif/svg等)图片地址');
}
})
},
getBase64(imgUrl) {
return new Promise((resolve, reject) => {
if (!imgUrl) {
reject('请传入imgUrl内容')
}
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) {
// 得到一个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等)图片地址')
}
})
},
到此这篇关于vue图片转base64格式的文章就介绍到这了,更多相关vue图片转base64格式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue图片转base64格式的方法示例
本文链接: https://www.lsjlt.com/news/175471.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0