安装:
  npm i image-conversion --save 引入:
  <script src="https://cdn.jsdelivr.net/gh/WangYuLue/image-conversion/build/conversion.js"></script>
  or
  const imageConversion = require("image-conversion") 用例:
  <input id="demo" type="file" onchange="view()">

  一、将图像压缩到200kb

  function view(){
  const file = document.getElementById('demo').files[0];
  console.log(file);
  imageConversion.compressAccurately(file,200).then(res=>{
  //The res in the promise is a compressed Blob type (which can be treated as a File type) file;
  console.log(res);
  })
  }   // or use an async function
  async function view() {
  const file = document.getElementById('demo').files[0];
  console.log(file);
  const res = await imageConversion.compressAccurately(file,200)
  console.log(res);
  }

  二、图像精度0.9

  function view(){
  const file = document.getElementById('demo').files[0];
  console.log(file);
  imageConversion.compress(file,0.9).then(res=>{
  console.log(res);
  })
  }

imageConversion的一些方法:

  ①imagetoCanvas()----缩放和旋转图片

    例子:

    imageConversion.imagetoCanvas(image);

    //or

    imageConversion.imagetoCanvas(image,{
    width: 300, //result image's width
    height: 200, //result image's height
    orientation:2,//image rotation direction
    scale: 0.5, //the zoom ratio relative to the original image, range 0-10;
    //Setting config.scale will override the settings of
    //config.width and config.height;
    })

      

  ②dataURLtoFile()----确定转换后的图像类型:“Image/png”、“Image/jpeg”、“Image/gif”

  ③compress()----如果传入的是数字,表示图片质量;如果传入的是对象,表示将参数传递给imagetoCanvasdataURLtoFile方法

    例子:

    // number
    imageConversion.compress(file,0.8)     //or     // object
    imageConversion.compress(file,{
    quality: 0.8,
    type: "image/jpeg",//如果压缩PNG透明图像,请选择“Image/png”类型
    width: 300,
    height: 200,
     orientation:2,
     scale: 0.5,
    })

  ④compressAccurately()----如果是传入的是数字,表示指定压缩后图像的大小(KB);如果传入的是对象,表示将参数传递给imagetoCanvasdataURLtoFile方法

    例子:

      // number
    imageConversion.compressAccurately(file,100); //The compressed image size is 100kb
    // object
    imageConversion.compressAccurately(file,{
     size: 100, //The compressed image size is 100kb
     accuracy: 0.9,//the accuracy of image compression size,range 0.8-0.99,default 0.95;
     //this means if the picture size is set to 1000Kb and the
     //accuracy is 0.9, the image with the compression result
     //of 900Kb-1100Kb is considered acceptable;
     type: "image/jpeg",
     width: 300,
     height: 200,
     orientation:2,
     scale: 0.5,
    })

参考:GitHub

图片转换工具:http://www.wangyulue.com/assets/image-comversion/example/index.html

 

JS通过指定大小来压缩图片的更多相关文章

  1. GIF图片裁剪出指定大小的GIF图片

    前言 最近在博客后台上传图片的时候,突然发现上传gif图片的时候裁剪图片有问题.既没法裁剪gif指定区域的图片,又没法裁剪指定区域生成一个新的指定大小的gif图.本来想直接去找个裁剪的库直接放上去的, ...

  2. gulpfile.js(编译sass,压缩图片,自动刷新浏览器)

    var gulp = require('gulp'),     sass = require('gulp-sass'),     watch = require('gulp-watch'),      ...

  3. js使用canvas在前端压缩图片

    HTML代码: <input id="file" type="file"> JS代码: var eleFile = document.querySe ...

  4. 用gulp-imageisux智图api压缩图片

    ➣ 智图平台是什么? 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式.同时, ...

  5. 等比例压缩图片到指定的KB大小

    基本原理: 取原来的图片,长宽乘以比例,重新生成一张图片,获取这张图片的大小,如果还是超过预期大小,继续在此基础上乘以压缩比例,生成图片,直到达到预期 /** * @获取远程图片的体积大小 单位byt ...

  6. C# 图片超过指定大小将压缩到指定大小不失真

    using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;us ...

  7. iOS学习——图片压缩到指定大小以内

    一.图片压缩简述 在我们开发过程中,有可能会遇到拍照.或者从相册中选择图片,要么单选或者多选,然后上传图片到服务器,一般情况下一张图片可能3-4M,如果类似微信朋友圈上传9张图片大约是 35M左右,如 ...

  8. C# 压缩图片到指定宽度,假如图片小于指定宽度 判断图片大小是否大于指定大小(KB) 如果大于则压缩图片质量 宽高不变

    class Program { static void Main(string[] args) {//G:\zhyue\backup\projects\Test\ConsoleApplication1 ...

  9. 【问题帖】压缩图片大小至指定Kb以下

    像PS,QQ影像等都有该功能,将图片大小压缩至指定kb以下. 我也来山寨一把,到目前为止,控制图片的大小,平时的解决方案通过分辨率和质量来控制的. 假定最后压缩的大小是100kb,那么在保证不大于10 ...

随机推荐

  1. N!(hdu1042)

    N! Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N! Input One N in one line, process ...

  2. jquery实现移动端页面加载后,向上滚动指定距离无效引起的探索

    效果如下,页面加载完后向上滚动一段距离 最近一同事询问用jquery为何无法实现上面效果,查看代码后发现代码并没写错,   也正确引入了zepto.js,也不是版本问题(因为是移动端项目,出于性能和需 ...

  3. Django学习笔记(16)——扩展Django自带User模型,实现用户注册与登录

    一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...

  4. SQL 除去数字中多于的0

    /* 除掉多于的0 */ CREATE FUNCTION [dbo].[fn_ClearZero] ( ) ) ) AS BEGIN ); IF (@inValue = '') SET @return ...

  5. 花了近十年的时间,整理出史上最全面Java面试题

    1.String 是最基本的数据类型吗? 不是.Java中的基本数据类型只有8个:byte.short.int.long.float.double.char.boolean:除了基本类型(primit ...

  6. python接口上传图片和文件的方法

    import requests def sendImg(img_path, img_name, img_type='image/jpeg'): """ :param im ...

  7. JAVA8新特性--集合流操作Stream

    原文链接:https://blog.csdn.net/bluuusea/article/details/79967039 Stream类全路径为:java.util.stream.Stream 对St ...

  8. linux下sendmail

    1. 安装 # yum install sendmail.x86_64 bin/mail会默认使用本地sendmail发送邮件,这样要求本地的机器必须安装和启动sendmail服务,配置非常麻烦,而且 ...

  9. Struts2 运行流程

    Struts2运行流程 1.在web.xml中使用Struts的核心过滤器拦截所有请求. <filter> <filter-name>struts2</filter-na ...

  10. tcp_tw_recycle参数引发的数据库连接异常

    [问题描述] 开发反馈有个应用在后端数据库某次计划性重启后经常会出现数据库连接异常问题,通过监控系统的埋点数据,发现应用连接数据库异常有两类表现:   其一:连接超时   131148.00ms To ...