require的方式用vue引入图片的require方式获取的值可以直接生成base64格式，但是该方法只适用于5kb大小以下的图片
const path = require('@/assets/images/test.png')canvas.toDataURL()该方法canvas.toDataURL(
image/${ext})传入的图片类型是什么生成后的base64数据前缀就是什么类型，如果传入的类型和生成的类型不同，则表示该方法不支持该类型的图片，例如gif图片转换后是pngimgUrlToBase64(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://blog.csdn.net/miao_yf/article/details/128110788
版权归原作者 仗剑东游的猫 所有， 如有侵权，请联系我们删除。
版权归原作者 仗剑东游的猫 所有， 如有侵权，请联系我们删除。