当前位置: 首页 > news >正文

【工具】前端JS/VUE修改图片分辨率

【工具】前端JS/VUE修改图片分辨率

/*** 暂时用不到 直接修改图片width属性即可* @param blob* @param z最大宽度* @returns {Promise<unknown>}*/async y压缩图片分辨率(blob, z最大宽度) {// 获取图片 blob// 把 blob 转成 Image 对象const imageBitmap = await createImageBitmap(blob);let targetWidth = imageBitmap.width;let targetHeight = imageBitmap.height;if(targetWidth <= z最大宽度){console.info('图片宽度小于最大宽度,无需压缩')return blob}console.info('图片宽度大于最大宽度,需压缩', targetWidth)// 如果宽度大于1200,则按比例缩放const scale = z最大宽度 / targetWidth;targetWidth = z最大宽度;targetHeight = Math.round(imageBitmap.height * scale);// 创建 Canvas 绘制缩放后的图像const canvas = document.createElement("canvas");canvas.width = targetWidth;canvas.height = targetHeight;const ctx = canvas.getContext("2d");ctx.drawImage(imageBitmap, 0, 0, targetWidth, targetHeight);// 转换为新的 Blob (JPEG/PNG均可)const compressedBlob = await new Promise(resolve => {canvas.toBlob(resolve, "image/jpeg", 0.9); // 0.9 为质量,可调整});return compressedBlob;}

http://www.xdnf.cn/news/1339885.html

相关文章:

  • 使用Docker部署Coze Studio开源版
  • Advanced Math Math Analysis |02 Limits
  • Oracle CLOB类型转换
  • k8s下的网络通信与认证
  • 【C++】模板(进阶)
  • 从YOLOv5到RKNN:零冲突转换YOLOv5模型至RK3588 NPU全指南
  • 在线课程|基于SprinBoot+vue的在线课程管理系统(源码+数据库+文档)
  • openEuler系统中如何将docker安装在指定目录
  • ES_文档
  • 【数据结构】树与二叉树:结构、性质与存储
  • 牛客:链表的回文结构详解
  • 牛客:链表分割算法详解
  • LeetCode100 -- Day3
  • C++---滑动窗口平滑数据
  • 深度学习之NLP基础
  • KB5063878补丁故障解决方案:从蓝屏幕到系统修复的全面指南
  • 短波红外科研相机:开启科研新视野的利器​
  • 【矩池云】实现Pycharm远程连接,上传数据并解压缩
  • C++入门自学Day16-- STL容器类型总结
  • 全文 part1 - DGEMM Using Tensor Cores, and Its Accurate and Reproducible Versions
  • 阿里云对象存储OSS之间进行数据转移教程
  • 打工人项目日报计划
  • 数据安全管理——解读银行保险机构数据安全管理办法【附全文阅读】
  • Elasticsearch Ruby 客户端elasticsearch / elasticsearch-api
  • DBLens 业界首创AI表结构变更审查,智能评估影响,助力开发效率跃升。
  • 数据库原理及应用_数据库基础_第2章关系数据库标准语言SQL_数据查询(2)分组查询
  • 第三方软件测试报告的行业价值
  • 两台电脑之间如何传输大文件?
  • C++设计模式--策略模式与观察者模式
  • 安卓app、微信小程序等访问多个api时等待提示调用与关闭问题