玩转前端之图片转base64（包教包会）

在前端开发上传图片功能时，当图片上传成功后往往需要展示给用户看，之前的做法是直接把img标签的src赋值为一个http://xxx.xxx.com地址。造成图片会请求后端服务器造成了资源的浪费。当时才疏短浅，技艺不精，如今对本功能进行优化。

base64简介

这里只简单说明一下base64的作用，他会生成一个字符串，把这个字符串绑定到img的src属性上，这样就避免了我们前端去请求后端服务器资源，提升网站性能，这里介绍两种图片转base64的方法：

1. 利用FileReader这个Api

MDN是这样解释的：FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

值得注意的是：这里恰好对应了我们前端上传的文件类型File或者Blob。

• FileReader事件处理

  • FileReader.onload：处理load事件。该事件在读取操作完成时触发，我们需要等图片加载完来执行操作。
  • FileReader.onerror：处理error事件。该事件在读取操作发生错误时触发。
  • FileReader.onloadend：处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

  • 实现代码

    // 这里我单独写一个函数返回一个
    const getBase64 = （file）=> { // file为我们上传钩子函数获取到的file对象
    	return new Promise(function(resolve, reject) {
        let reader = new FileReader()
        let imgResult = '' // imgResult最终转换后的base64的值
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result as string
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          // 成功后调用resolve回传值
          resolve(imgResult)
        }
      })
    }
    

    2. 利用canvas

    使用canvas来生成图片base64字符串，主要是本地一些图片资源。

    • 代码实现

       const getBase64 = (url) => {
       	// 返回一个Promise
       	return new Promise( resolve => {
       		// 创建一个image标签
      		let image = new Image()
      		// 绑定url
      		image.src = url
      		// 挂载到页面
      		document.body.appendChild(image)
      		// 等待图片加载完毕后触发
      		image.onload = function () {
      			// 创建canvas
      			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)
      			// 转base64字符串
      			canvas.toDataURL()
      		}
       	}
      }