在前端开发上传图片功能时,当图片上传成功后往往需要展示给用户看,之前的做法是直接把
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()
}
}
}