vue图片转base64格式的方法-创新互联
- require的方式
用vue引入图片的require方式获取的值可以直接生成base64格式,但是该方法只适用于5kb大小以下的图片
10年积累的网站设计制作、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先做网站设计后付款的网站建设流程,更有安福免费网站建设让你可以放心的选择与我们合作。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等)图片地址') } }) },
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
本文标题:vue图片转base64格式的方法-创新互联
当前路径:http://pwwzsj.com/article/ecdph.html