GithubHelp home page GithubHelp logo

ulidev9527 / z_img Goto Github PK

View Code? Open in Web Editor NEW
23.0 1.0 2.0 5.85 MB

图片操作工具,支持PNG,jpg,GIF【间接更新】

License: MIT License

JavaScript 89.01% HTML 1.10% CSS 9.89%
imagemin tinypng

z_img's Introduction

z_img

图片压缩工具【持续更新中】

重要更新

2017-11-28

命令行

  1. npm i -g zimg

  2. 定位文件夹,然后执行:zimg

zimg 压缩当前文件夹所有图片

zimg *.png *.jpg 压缩指定图片

作为压缩网站:

  1. npm i -g zimg

  2. zimg -r或者zimg -r 3000

自动打开浏览器窗口

作为项目调用

  1. npm i zimg --save

  2. const zimg = require('zimg');

  3. zimg(输入文件(arr或者string),输出文件夹路径);

功能说明

  1. cli命令

操作测试   2. 网页压缩图片

操作测试

流程说明

  • 图片压缩说明:
  1. 用户每次打开新的页面都会生成一个session

  2. 用户上传第一张图片时,生成session对应的文件夹,文件夹位于 lib/express/compass

  3. 同时生成2个文件夹lib/express/compass/{{文件名}}(存放源文件)和lib/express/compass/{{文件名}}/compass(存放压缩文件)

  4. 压缩后会返回图片的base64字符串,并添加了data:image/**;base64,数据头:lib/express/upload.js => (v.data = 'data:' + contentType + ';base64,' + v.data;)

  5. 数据返回用户后,lib/express/static/index.js => _zip.add(res.name, res.data);添加压缩文件

提示:由于jszip压缩的base64字符串不需要文件头,所以去掉文件头信息 lib/express/static/index.js => data.replace(/data.+base64,/, '')

lib/imagemin

图片压缩核心 仅对imagemin包进行了再次包装。

依赖包

imagemin

使用方式

cosnt imagemin = require('./lib/imagemin');

API

文件路径问题详情查看:imagemin

 cosnt imagemin = require('./lib/imagemin');

 //imagemin.compass(input,output);

 // input: 文件目录或者文件地址, './image/*.{jpg,png}' || './image/1.jpg' || ['./image/*.{jpg,png}','./image/1.jpg']

 // output: 文件输出目录 './image/compass' 默认:'imagemin/temp'

 imagemin.compass('./image/*.{jpg,png}','./image/compass')
    .then(v =>{
        if(v.status){
            console.log(v.data); //[{ data: buffer数据, path:图片路径 }] 路径为output所填路径加图片名称 './image/compass/1.jpg'
        }else{
            console.log(v.error); //错误消息
        }
    });

日志(时间倒叙)

2019-03-31

  1. 添加命令行队列处理,解决卡死问题

  2. 优化命令处理逻辑

2018-04-11

  1. 修改协议为MIT

2017-11-28

  1. 取消定位到文件夹进行网页压缩功能

  2. 增加命令行启动网页压缩功能

  3. 增加外部项目调用压缩功能

2017-09-19

  1. 添加cli命令处理

2017-09-15

  1. 新增GIF压缩

2017-09-14

  1. 清除多余包

  2. 取消co库,改为async await

2017-09-07

  1. 添加上传成功、失败提示

  2. 优化上传失败展示文案

  3. 修复图片上传报错问题

2017-05-08

  1. 添加数据展示信息

数据展示信息

  1. 优化用户文件夹创建时间,之前是在用户访问页面时创建文件夹,现在修改为用户上传第一张图片的时候创建,避免用户一直刷新。

  2. 用户已打开页面,但是服务器重启过,导致用户session失效,bug修复。

  3. 添加图片预览,添加图片后点击列表中的图片可以在独立标签打开页面预览图片。

  4. 图片限制30M,并发修改为1

z_img's People

Contributors

ulidev9527 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

iamxp inier

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.