zoukankan      html  css  js  c++  java
  • JS通过指定大小来压缩图片

    安装:
      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,{
           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”类型
           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",
           300,
          height: 200,
          orientation:2,
          scale: 0.5,
        })    

    参考:GitHub

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

     
  • 相关阅读:
    Class.getSimpleName()的作用
    win7下制作ubuntu系统安装启动盘和U盘安装ubuntu全过程
    奈奎斯特三大准则
    [转]OFDM中保护间隔和循环前缀抵抗ISI和ICI
    频偏
    移动通信里面,OFDM技术所说的“载波相互正交”是什么意思?
    虚拟盘符映射
    npm 安装与常用命令
    ASP.NET WebAPI HTTPS
    记录下自己写的gulp打包脚本
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11847902.html
Copyright © 2011-2022 走看看