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,{
      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

 

 

 
posted @ 2019-11-13 11:56  吴小明-  阅读(6504)  评论(0编辑  收藏  举报