玩转前端之图片转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事件。该事件在读取操作结束时（要么成功，要么失败）触发。

• 实现代码

// 这里我单独写一个函数返回一个constgetBase64=（file）=>{// file为我们上传钩子函数获取到的file对象returnnewPromise(function(resolve, reject){let reader =newFileReader()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

字符串，主要是本地一些图片资源。

• 代码实现

constgetBase64=(url)=>{// 返回一个PromisereturnnewPromise(resolve=>{// 创建一个image标签let image =newImage()// 绑定url
        image.src = url
        // 挂载到页面
        document.body.appendChild(image)// 等待图片加载完毕后触发
        image.onload=function(){// 创建canvasconst 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()}}}