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

     
  • 相关阅读:
    008-解决sublime text3安装Package Control问题
    156-a++与++a区别?
    155-类型转换的六条规则是什么?
    040-springboot工程无法逆向工程生成?
    153-如何搭建springboot框架?
    【根据生日获取年龄】
    富文本 保存转义StringEscapeUtils.unescapeHtml4(
    git ,报403错误,完美解决方案
    idea创建Maven项目后启动报404
    IntelliJ IDEA2016.1 + maven 创建java web 项目[转]
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11847902.html
Copyright © 2011-2022 走看看