首页 > 其他分享 >js(canvas) 图片压缩

js(canvas) 图片压缩

时间:2023-12-11 09:45:10浏览次数:32  
标签:canvas img naturalHeight 压缩 height width let js

 1 function compress(url, width, height) {
 2     return new Promise((resolve, reject) => {
 3         let img = document.createElement('img')
 4         img.onload = () => {
 5             let w = width
 6             let h = img.naturalHeight * (width / img.naturalWidth) //等比缩放
 7             if (h < height) {
 8                 w = img.naturalWidth * (height / img.naturalHeight)
 9                 h = height
10             }
11             let c = document.createElement('canvas')
12             c.width = width
13             c.height = height
14             let ctx = c.getContext('2d')
15             ctx.drawImage(img, 0, 0, w, h)
16             resolve(c.toDataURL('image/png'))
17         }
18         img.onerror = reject
19         img.src = url
20     })
21 }

 

标签:canvas,img,naturalHeight,压缩,height,width,let,js
From: https://www.cnblogs.com/87duan/p/17893706.html

相关文章

  • MyBatis-Plus 自定义 TypeHandler 映射JSON类型为List
    1在mysql5.7支持json类型,那么在表实体是怎么运用的在mybatis-plus中有相关的handler/***Jackson实现JSON字段类型处理器**@authorhubin*@since2019-08-25*/@Slf4j@MappedTypes({Object.class})@MappedJdbcTypes(JdbcType.VARCHAR)publicclassJackso......
  • NodeJS项目build成为本地镜像上传阿里云ACR
    先注册阿里云账号选择“容器镜像服务”->“个人实例”。由于是测试目的,个人版也可以接受。创建命名空间创建镜像仓库选择本地仓库-本示例会从本机推送镜像创建成功后,会有提示相关命令创建一个nodejs项目package.json{"name":"docker_web_app","versio......
  • Linux操作系统 文件查找、打包压缩及解压读书笔记
    当涉及Linux文件查找、打包压缩和解压时,确实有很多详细的内容。以下是更详细的解释和示例:1.文件查找在Linux中,find命令用于在文件系统中搜索文件和目录。下面是一些常见用法:基本用法:在整个文件系统中查找文件或目录:bashCopycodefind/-namefilename在当前目录及......
  • 安装jsdom/tough-cookie 【Error: Cannot find module ‘jsdom‘】的解决方法
    本人使用nvm安装的node解决方法:cmd管理员模式下npminstallnpminstall-gjsdomtough-cookie与上同理再把目录放到环境变量中参考:https://blog.csdn.net/qyk594760/article/details/134353102https://blog.csdn.net/JJ_Smilewang/article/details/127823953......
  • Js(Javascript)中的apply方法的使用
    ​ JavaScript中的apply()方法用于调用函数,允许指定函数的this对象和参数。也就是通过function的apply方法来调用方法,可以改变方法的this的对象,并且还可以传入方法参数,apply对于面向对象编程还是很有用的。参考文档:Js(Javascript)中的apply方法的使用-CJavaPy1、基本语......
  • 7、Linux学习文件查找、打包压缩及解压
    一、文件查找1.1which命令(搜索某个系统命令的位置)which命令的作用是,在PATH变量指定的路径中,搜索某个系统命令的位置,并且返回第一个搜索结果。也就是说,使用which命令,就可以看到某个系统命令是否存在,以及执行的到底是哪一个位置的命令。1.2find命令find是在硬盘上遍历查找,因......
  • NestJS 筑基:TypeScript 类和装饰器
    前言先回顾下前文中介绍了哪些内容:使用@nestjs/cli创建和管理Nest应用Hello,World示例代码分析Nest基本概念:模块,控制器,服务常用的装饰器:@Module、@Controller、@Get、@InjectableNest目录结构分析@nest/cli脚手架的命令本文先不继续讲解Nest中的内容,而是打算介绍TypeSc......
  • 231-js 动态创建a元素,点击a后,打开新页签,下载文件
    functiondownloadFile(){constlink=document.createElement('a');link.href='your_file_url';//替换为要下载的文件的URLlink.target='_blank';link.download='file_name';//替换为要保存的文件名document.body.appendChi......
  • JSON提取器id+BeanShell断言
    JSON提取data中的值: 用提取得值${id}再继续执行: 利用BeanShell断言:importorg.json.*;Stringresponsedata=prev.getResponseDataAsString();JSONObjectdata_obj=newJSONObject(responsedata);Stringid=data_obj.get("data").get("id").toString();Strings......
  • js逆向-海南社保服务平台
    声明本文仅供学习参考,如有侵权可私信本人删除,请勿用于其他途径,违者后果自负!如果觉得文章对你有所帮助,可以给博主点击关注和收藏哦!前言目标网站:aHR0cHM6Ly9obnNieWIuaGFpbmFuLmdvdi5jbi8jL25ld3MtbW9kdWxlP3dlYnNpdGU9MQ==接口:Z2dmdy92MS91bmlmaWVk前几天看了一篇博文是关于本......