JS通过指定大小来压缩图片

Posted 2020-11-23 吴小明

安装：
　　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()----如果传入的是数字，表示图片质量；如果传入的是对象，表示将参数传递给imagetoCanvas和dataURLtoFile方法

　　　　例子：

　　　　// 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）；如果传入的是对象，表示将参数传递给imagetoCanvas和dataURLtoFile方法

　　　　例子：

    　　// 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