当前位置:首页 » 《随便一记》 » 正文

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

22 人参与  2024年02月07日 19:16  分类 : 《随便一记》  评论

点击全文阅读


在前端开发上传图片功能时,当图片上传成功后往往需要展示给用户看,之前的做法是直接把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()// 绑定urlimage.src = url// 挂载到页面document.body.appendChild(image)// 等待图片加载完毕后触发image.onload = function () {// 创建canvasconst canvas = document.createElement('canvas');const ctx = canvas.getContext('2d')// 设置宽度和高度canvas.width = image.widthcanvas.height = image.height// 绘制图片ctx.drawImage(image, 0, 0, image.width, image.height)// 转base64字符串canvas.toDataURL()} }}

点击全文阅读


本文链接:http://zhangshiyu.com/post/67761.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 我无名分,我不多嗔小说完结篇(陆景铄林悠悠)(我无名分,我不多嗔)全书无套路阅读无广告小说大结局
  • 奈何春风不曾渡我虐心反转_童烟沈叙白陆依在线看_小说后续在线阅读_无删减免费完结_
  • 鹿雪附加完整在线阅读(小祖宗她带着双宝闹翻天)最近更新列表
  • 你要战功我给你,妖兽入侵你哭啥高质量好文叶天凌筱完本_你要战功我给你,妖兽入侵你哭啥高质量好文(叶天凌筱)
  • 夫君和小三霸占了我的将军府,我杀疯了阅读_雪儿谭绍木兰全集_小说后续在线阅读_无删减免费完结_
  • 鹿溪小说(鹿溪)终章+番外(穿进恐怖游戏后,我和反派HE了)一口气阅读
  • 完结文留给儿子的副卡月月刷爆,他却因睡桥底被送进收容所列表_完结文留给儿子的副卡月月刷爆,他却因睡桥底被送进收容所(娄墨霆宋佑轩)
  • 你活着,却死在我等你的第三年后续+番外_谨言佳佳温以宁全集_小说后续在线阅读_无删减免费完结_
  • 相思溺于夏时雨小说(裴景澈初念可)章节目录+起始篇章(相思溺于夏时雨)全章无套路在线
  • 未婚夫重生归来叫停手术,把剥开肚子的我困在手术台上40分钟(裴临渊阮离歌)
  • 完结文离婚是你提,净身出户你又哭什么精彩分享列表_完结文离婚是你提,净身出户你又哭什么精彩分享(苏铭余素伊)
  • 全书浏览哥哥重生救我,我带队灭了组织!(陈致远陈知韫)_哥哥重生救我,我带队灭了组织!(陈致远陈知韫)全书结局

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1