Document

> 最近在复习，觉得这个知识点蛮有意思，就学了一下，随手写一篇笔记。考虑范围有限，欢迎交流讨论。 # 出现场景：有些需求需要用户上传照片，而上传图片可能太大，导致上传时间过长，用户体验下降，这时候可以考虑前端做好图片文件压缩，减轻服务器压力。 *** # 最终效果： >原本图片大小 ![a.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce277b1351fd435bb561e9421811af05~tplv-k3u1fbpfcp-watermark.image?) >获取到初始的base64文件大小（17MB） ![O$S1}YMUBM4MQV_GWGK0ZS5.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cff5527f1d5a49729cc69b185b9f953f~tplv-k3u1fbpfcp-watermark.image?) >canvas操作后的大小（1.1MB） ![D[8)KH1{@7YNPYV{]ZTX%}2.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45f022441a454897ac7c524ac36ddd1f~tplv-k3u1fbpfcp-watermark.image?) *** # 实现逻辑 ![b.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf4d994f46e140d88b2e521e7f285622~tplv-k3u1fbpfcp-watermark.image?) *** # 重点指出 ## file文件转base64格式 ![az.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e153f4c4f6c14d2684e7011b44297ce6~tplv-k3u1fbpfcp-watermark.image?) ### FileReader.readAsDataURL MDN上对它的解释： > `readAsDataURL` 方法会读取指定的 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 或 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 对象。读取操作完成的时候，[`readyState`](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readyState) 会变成已完成`DONE`，并触发 `[loadend (en-US)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/loadend_event "Currently only available in English (US)")` 事件，同时 [`result`](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/result) 属性将包含一个`data:`URL格式的字符串（base64编码）以表示所读取文件的内容。 *** ## 通过Canvas对Base64数据进行压缩 ![b.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c081020c84d4ab7bcf6fba0f58008a2~tplv-k3u1fbpfcp-watermark.image?) ``` // 处理base64数据，通过canvas(toDataURL)进行压缩绘制，然后输出压缩后的base64图片数据 // 图片最大宽度 const MAX_WIDTH = 800; const compress = (base64, quality, mimeType) => { //mimeType 图片类型，例如 mimeType='image/png' console.log( "处理base64数据，通过canvas(toDataURL)进行压缩绘制，然后输出压缩后的base64图片数据" ); let cvs = document.createElement("canvas"); let img = document.createElement("img"); // CORS 策略，canvas中image会存在跨域问题 img.crossOrigin = "anonymous"; return new Promise((resolve, reject) => { img.src = base64; // 图片偏移值 let offetX = 0; img.onload = () => { if (img.width > MAX_WIDTH) { // 做适配 cvs.width = MAX_WIDTH; cvs.height = (img.height * MAX_WIDTH) / img.width; offetX = (img.width - MAX_WIDTH) / 2; } else { cvs.width = img.width; cvs.height = img.height; } // 重点！将图片插入画布并开始绘制 let ctx = cvs .getContext("2d") .drawImage(img, 0, 0, cvs.width, cvs.height); let imageData = cvs.toDataURL(mimeType, quality); console.log("canvas图片压缩", imageData); resolve(imageData); }; }); }; ``` >补充说明：canvas中图片cors配置问题 >尽管您可以在画布中使用未经 CORS 批准的图像，但这样做会污染画布。一旦画布被污染，您就不能再将数据拉出画布。例如，您不能再使用画布的 toBlob()、toDataURL() 或getImageData() 方法；这样做会引发安全错误。 >这可以防止用户通过使用图像在未经许可的情况下从远程网站提取信息而暴露私人数据。这里给出一篇相关讨论帖子 https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror ### Canvas.getContext("2d").drawImage(img,0,0,width,height) MDN上的介绍： ### 最重要的点：*canvas*.toDataURL(*type*, *encoderOptions*); 参数： - `type` 可选图片格式，默认为 `image/png` - `encoderOptions` 可选在指定图片格式为 `image/jpeg 或` `image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量`。如果超出取值范围，将会使用默认值 `0.92`。其他参数会被忽略。 ### [返回值](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL#%E8%BF%94%E5%9B%9E%E5%80%BC) 包含`data URL`的`DOMString`。 *** ## Base64格式转Blob二进制格式 ![c.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/889a8604965a4d9d8805716a2a5a71c8~tplv-k3u1fbpfcp-watermark.image?) ``` // base64数据转成blob文件流 const converrBase64UrlToBlob = (base64, mimeType) => { //mimeType 图片类型，例如 mimeType='image/png' console.log("base64数据转成blob文件流"); let bytes = window.atob(base64.split(",")[1]); //atob方法用于解码base64 // 创建一个长度为 bytes.length 的 buffer(一个二进制文件), 它会分配一个 16 字节（byte）的连续内存空间，并用 0 进行预填充。 let ab = new ArrayBuffer(bytes.length); // Uint8Array —— 将 ArrayBuffer 中的每个字节视为 0 到 255 之间的单个数字（每个字节是 8 位）。这称为 “8 位无符号整数”。 let ia = new Uint8Array(ab); for (let i = 0; i < bytes.length; i++) { // 更改里面的初始化内容 ia[i] = bytes.charCodeAt(i); } // 创建blob格式数据，并传入二进制文件和文件原本类型 let _blob = new Blob([ia], { type: mimeType }); toImg(_blob); return _blob; }; ``` ### ArrayBuffer MDN上的描述： **`ArrayBuffer`** 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为“byte array”。 *** # 示例代码 ```html Document ``` *** >参考文章： [前端图片压缩上传（压缩篇）：可能是最适合小白的前端图片压缩文章了！](https://juejin.cn/post/6844903495703904263#heading-1) [图片压缩上传](https://juejin.cn/post/6844903509289074695#heading-0)

# 交个朋友（2022.03.20记）目前正在疯狂学习前端知识，想要成为更优秀的前端工程师，因此喜欢记录并分享自己的学习笔记。奈何本人知识储备有限，只能做到输出一些些自己的观念。不过！我真的有做很多很多笔记（确实很多笔记是摘抄而来，因此作为自己的帖子发出不厚道....），我也真的很希望能和志同道合的小伙伴们分享交流更多知识点！因此我简单搭建了一个自己的博客，希望能结识到更多小伙伴，如果有兴趣，来我博客逛逛吧~ [阿敏的成长日记](https://enthusiastic-citizen-wang.gitee.io/)