当前位置: 首页 > 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.dtcms.com/a/342458.html

相关文章:

  • C语言数据结构:动态顺序表实现与应用
  • 如何使用Prometheus + Grafana + Loki构建一个现代化的云原生监控系统
  • 数字社会学是干什么的?数字社会学理论与数字社会学家唐兴通讲数字社会学书籍有哪些?AI社会学人工智能社会学理论框架
  • 4090服务器无法sudo apt update 问题解决
  • 告别服务器!Amazon Lambda无服务开发实战指南
  • CI/CD 学习之路
  • 佰钧成 社招 一面
  • Cesium 实战 27 - 自定义纹理材质 - 立体墙(渐变色)
  • 【数据结构入门】排序算法:插入排序
  • C和C++的区别?
  • 水深水温测量仪:水域监测的“智慧双眸”
  • Linux学习:信号的概念与产生方式
  • 03 安装【动手学深度学习v2】
  • CAN高速通信(含简单程序实战)
  • 解决远程桌面连接“为安全考虑,已锁定该用户帐户,原因是登录尝试或密码更改尝试过多”问题
  • idea将服务封装为一个jar包
  • RabbitMQ如何确保消息发送和消息接收
  • 无监督学习(聚类 异常检测)
  • 数据大屏全链路质量保障测试
  • Eino 框架组件协作指南 - 智能图书馆建设手册
  • java基础(十三)消息队列
  • 【Springboot进阶】Java切面编程对性能的影响深度分析
  • K8s概念之进程、容器与 Pod 的终极指南
  • 第二阶段Winform-3:常用控件介绍2
  • 算法题(187):程序自动分析
  • k8s集群限制不同用户操作
  • Windows 笔记本实现仅关屏仍工作:一种更便捷的 “伪熄屏” 方案
  • 基于Spring Cloud Gateway动态路由与灰度发布方案对比与实践指导
  • 哈希表知识总结
  • 风吸式杀虫灯在果园的作用