canvas图片压缩--案例
案例 -- 图片 压缩 Canvas
2023-09-11 14:18:36 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="file" id="upload"></input> <script> const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg']; const MAXSIZE = 3 * 1024 * 1024; const MAXSIZE_STR = '3MB'; // 读取图片方法 function converImageToBase64(file, callback) { let reader = new FileReader(); reader.addEventListener('load', function(e) { const base64Image = e.target.result; // 读取图片 callback && callback(base64Image) reader = null; // 回收 }) reader.readAsDataURL(file); } // 压缩方法1 function compress(base64Image, callback) { console.log(base64Image); let maxW = 1024; let maxH = 1024; const image = new Image(); // 渲染图片 - 获取图片的宽高- 压缩宽高 - 压缩分辨率 image.addEventListener('load', function(e) { let ratio; // 图片的压缩比 let needCompress = false; // 是否需要压缩 if (maxW < image.naturalWidth) { needCompress = true; ratio = image.naturalWidth / maxW; console.log('压缩比例', ratio); maxH = image.naturalHeight / ratio; // 获得高度压缩值 } // 经过处理后,实际图片的尺寸为1024 * 640 ; if (maxH < image.naturalHeight) { needCompress = true; ratio = image.naturalHeight / maxH; maxW = image.naturalWidth / ratio; } if (!needCompress) { maxW = image.naturalWidth; maxH = image.naturalHeight; } // 如果不需要压缩,需要获取图片的实际尺寸 const canvas = document.createElement('canvas'); canvas.setAttribute('id', '__compress__'); canvas.width = maxW; canvas.height = maxH; canvas.style.visibility = 'hidden'; // visible可显示 document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, maxW, maxH); ctx.drawImage(image, 0, 0, maxW, maxH); // 质量压缩-start const compressImage = canvas.toDataURL('image/jpeg', 0.8); // 参数二:压缩比例0-1 callback && callback(compressImage); //挂载到页面-一下;对比 const _image = new Image(); _image.src = compressImage; document.body.append(_image); canvas.remove(); console.log('压缩比:' + image.src.length / _image.src.length); }); image.src = base64Image; document.body.appendChild(image); // 挂在到页面 } // 压缩回调方法 function uploadToServer(compressImage) { console.log('upload to server .... ', compressImage); } const upload = document.getElementById('upload'); upload.addEventListener('change', function(e) { const [file] = e.target.files; console.log(e.target.files); if (!file) { return; } const { type: fileType, size: fileSize } = file; // if(ACCEPT.indexOf(fileType) < 0) { if (!ACCEPT.includes(fileType)) { // alert('不支持[' + fileType + ']文件类型!'); alert(`不支持[${fileType}]文件类型!`); upload.value = ''; return; } if (fileSize > MAXSIZE) { alert(`文件超出${MAXSIZE_STR}`); upload.value = ''; return; } // 调用方法--开始压缩1 converImageToBase64(file, (base64Image) => compress(base64Image, uploadToServer)) }) </script> </body> </html>
相关文章
- HttpListener通讯成功案例
- 干货--Redis+Spring+Struts2实现网站计算器应用项目案例
- 第二百五十四节,Bootstrap项目实战--案例
- 开放下载丨云原生架构容器&微服务优秀案例集
- 大叔案例分享(4)定位分析--见证scala的强大
- Java数组--获取数组中的最大值案例
- SPSS聚类分析——一个案例演示聚类分析全过程
- 59. 案例分析 - 如何通过 F1 和单步调试,找到 SE10 事物码里用户名字段的初始值填充逻辑
- javascript案例36——点击调用函数
- AutoML之flaml:基于OpenML数据集利用flaml框架自动寻找最优算法及其对应最佳参数(对比lightgbm和xgboost算法)实现预测航班是否延误二分类任务案例之详细攻略
- ML之shap:基于boston波士顿房价回归预测数据集利用shap值对XGBoost模型实现可解释性案例
- ML之XGBoost:Kaggle神器XGBoost算法模型的简介(资源、调优)、安装教程、使用方法、案例应用之详细攻略
- DL之Xception:Xception算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
- BigData之Hbase:Hbase(基于列的/分布式存储的/开源的非关系型数据库)的简介、下载、案例应用之详细攻略
- Python语言学习:Python语言学习之python包/库package的简介(模块的封装/模块路径搜索/模块导入方法/自定义导入模块实现华氏-摄氏温度转换案例应用)、使用方法、管理工具之详细攻略
- 案例解读华为隐私计算产品TICS如何实现城市跨部门数据隐私计算
- 快速迁移数据中心:华为云数据库SQL Server实践案例技术解析
- 【数字信号处理】线性时不变系统 LTI ( 判断某个系统是否是 “ 非时变 “ 系统 | 案例三 )
- y161.第九章 GitOps从入门到精通 -- Tekton Trigger实战案例(十)
- y158.第九章 GitOps从入门到精通 -- Pipeline高级用法和实战案例Source-2-Image(七)
- y132.第七章 服务网格与治理-Istio从入门到精通 -- Istio认证及配置案例(十八)
- y51.第三章 Kubernetes从入门到精通 -- k8s实战案例(二四)
- y50.第三章 Kubernetes从入门到精通 -- k8s实战案例(二三)
- 【SPSS】游程检验-变量值随机性检验和两独立样本的W-W游程检验详细操作教程(附案例实战)
- a35.ansible 生产实战案例 -- 基于二进制包安装kubernetes v1.22 -- 集群升级(二)
- a24.ansible 生产实战案例 -- 基于kubeadm安装kubernetes v1.20 -- 集群部署(一)
- a23.ansible 生产实战案例 -- haproxy roles
- a21.ansible 生产实战案例 -- keepalived roles
- a7.ansible 生产实战案例 -- chrony客户端roles
- a2.ansible 生产实战案例 -- 系统初始化playbook
- a1.ansible 生产实战案例 -- 安装ansible和配置
- 史上最全的2022年最新版软件测试面试题集锦(含答案+案例分析)【二】,再战金九银十