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

     
  • 相关阅读:
    Powershell 的自己主动部署
    Python 爬虫批量下载美剧 from 人人影视 HR-HDTV
    c :函数指针具体解释
    云计算设计模式(二十二)——静态内容托管模式
    Bash 脚本 getopts为什么最后一个參数取不到
    清理SYSAUX表空间的WRH$_LATCH_CHILDREN表
    Linux配置防火墙,开启80port、3306port 可能会遇到的小问题
    Android v4包中的 SwipeRefreshLayout 官方的下拉刷新组件
    Nginx 笔记与总结(3)配置虚拟主机
    用SPSS做时间序列
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11847902.html
Copyright © 2011-2022 走看看