玩转前端之图片转base64(包教包会)

勇宝趣学前端 2024-06-30 09:03:06 阅读 96

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

base64简介

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

1. 利用FileReader这个Api

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

值得注意的是:这里恰好对应了我们前端上传的文件类型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()

}

}

}



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。