鱼塘码农

菜鸟学习记录
鱼海无涯

可指定大小的js压缩图片

之前写了一篇《webapp图片上传后自动旋转90度问题处理及图片压缩js》(下面简称“上篇文章”)地址:http://caojim.com/index.php/archives/101/
上篇文章里图片压缩无法指定大小,只能压缩精度,压缩完后会变小,但是具体变多小不能控制,甲方要求让我压缩到300K,只能再百度一番,果然让我找到了办法:
安装依赖:

npm i image-conversion --save

这个依赖安装完后不需要引用,在用到的地方加上下面一句代码就可以用了

const imageConversion = require("image-conversion")

然后加上这么一段,就已经压缩大小了。200是大小,file是文件,如果只需要压缩图片,用这段就可以了。注意:这里的res是Blob格式的,若有其他要求可以转换。

imageConversion.compressAccurately(file,200).then(res=>{
      console.log(res);
    })
  }

除了直接传入大小,200的位置还可以改成一个对象,指定图片的各种属性:

imageConversion.compressAccurately(file,{
      size: 100,   
      accuracy: 0.9,
      type: "image/jpeg",
      width: 300,
      height: 200,
      orientation:2,
      scale: 0.5,
    })  

上篇文章里还有图片旋转的内容,这个工具也可以旋转,上面的orientation属性就是图片旋转的角度,具体如下:
1742906-20191113113823374-544467421.png

最后附上这次修改后的完整代码,注释不多,可以看我上篇文章里面的注释,除了压缩不一样,别的都一样

/**
 * 压缩图片
 * @param file 图片文件
 * @param callback 回调函数,压缩完要做的事,例如ajax请求等。
 */
import EXIF from "exif-js";

function compressFile(file, callback){
  console.log(file);
  let Orientation;
  EXIF.getData(file, function (){
    Orientation = EXIF.getTag(this, "Orientation")
    let UA = navigator.userAgent,
      isRedmi = /Redmi/i.test(UA);
    let xuanzhuan=1;
    if (Orientation != "" && Orientation != 1 && isRedmi) {
      switch (Orientation) {
        case 6: //需要顺时针(向左)90度旋转
          xuanzhuan = 6;
          break;
        case 8: //需要逆时针(向右)90度旋转
          xuanzhuan = 8;
          break;
        case 3: //需要180度旋转
          xuanzhuan = 3;
          break;
        default:
          xuanzhuan = 1;
          break;
      }}
    const imageConversion = require("image-conversion")
    imageConversion.compressAccurately(file,{
      size: 400,
      type: "image/jpeg",
      orientation:xuanzhuan,
    }).then(res=>{
      //The res in the promise is a compressed Blob type (which can be treated as a File type) file;
      console.log(res);//这里的res是Blob格式的内容,下面5行代码是转换成base64的,因为我的上传方法是传base64,所以直接给回调函数base64
      var reader = new window.FileReader();
      reader.readAsDataURL(res);
      reader.onloadend = function() {
        let base64data = reader.result;
        callback({content:base64data,file:file.name})
      }
    })
  })
};

export default compressFile;

参考文章:https://www.cnblogs.com/wuqilang/p/11847902.html

文章内容可能来自网络,纯为学习使用,若有侵权,请联系我删除 | 当前页面:鱼塘码农 » 可指定大小的js压缩图片

评论