vue点击更换图片（vue 图片转base64格式的方法）

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