vue 图片转base64格式的方法

编辑：rootadmin

vue 图片转base64格式的方法 require的方式

推荐整理分享vue 图片转base64格式的方法，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

用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 = 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等)图片地址'); } }) },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.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等)图片地址') } }) },

本文链接地址:https://www.jiuchutong.com/zhishi/295686.html 转载请保留说明！

上一篇：【HTML】HTML网页设计----动漫网站设计(html的网址)

下一篇：基于RuoYi框架自动生成后端代码及前端界面(ruoyi框架快速入门)