• 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

     
  • 相关阅读:
    职业规划 !!
    linux上ssh配置指南
    低内存VPS用轻量级的Dropbear替换OpenSSH
    修改shell终端提示信息
    减少windows7内存占用的优化方案(内存占用才285兆 比XP还省)
    linux下提示符修改
    mysql存储过程学习笔记区块,条件,循环
    Apache下实现禁止目录浏览
    [学习指导] linux 启动过程以及 /etc/rc.d/init.d/目录的一点理解
    mysql 5.0存储过程学习总结
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11847902.html
Copyright © 2020-2023  润新知