好久没发贴了,最近捣鼓了个基于node的图片压缩小网站解析。

看了下,距离上次发帖都是去年10月份的事,忙于工作的我很少跑博客园里面来玩了。

做这个小网站的初衷是 https://tinypng.com/ 这个网站有时候访问很慢,然后自己去研究了下图片压缩。

网上有看到 https://tinypng.com/ 中使用的 pngquant , 我去下载了pngquant的cli看了下,然后就开始了这个小网站的基础。

先看看前端页面:

这个功能还会扩建,所以现在界面只有简洁的一部分。

现在的功能基本上只有图片压缩和打包下载,

前端页面用到的: vue、webuploader、jq、layer、jszip

后端:express、co、md5、imagemin

才开始的时候使用的是纯pngquant-lib操作,虽然成功了,但是只能压缩png图片,所以抛弃了,去npmjs网站看了下,最后决定压缩直接用imagmin 前人栽树后人乘凉嘛。

整个流程逻辑,简单说就是:上传-压缩-打包

下面我就分步来说说处理的内容;

1. 上传

  这里的上传使用的百度webuploader插件,用习惯了。

  上传只做的对图片的验证,其它的没处理,比如文件大小什么的,所以大文件上传估计会有问题。

  在用户打开页面的时候会分配一个目录用于保存上传的图片和压缩图片,其主要作用就是保存当前上传信息,后期扩展会用到,现在没什么大用处,主要作用可以避免用户上传图片不会出现冲突的情况。

2. 压缩

  压缩使用的是:imagemin 写这个的是真大神 现在图片外流的图片压缩算法基本上都有他的影子 膜拜,不废话了

  对imagemin进行一个简单的包装,方面项目内部使用

  

  成功压缩后返回压缩后的图片大小、名称和base64数据

3. 打包:使用的是jszip在前端打包,本来想在后端打包,但是考虑到性能问题,打包就交给前端了,前端也没考虑浏览器兼容,

  数据返回后,把接受到的数据放到zip里面去,然后就可以等待用户下载了。

遇到的问题:

1. imagemin中

imageminMozjpeg压缩配置:{targa: true},node压缩时居然报错,然后跑到https://www.npmjs.com/package/imagemin-mozjpeg去看,里面说明了targa通常不需要,我就呵呵了,直接干掉

2. jszip压缩,不需要 data:image/png;base64, 这个字符串,但是为了前端预览压缩后的文件,我在后端添加了这段文件头

开始捣鼓了半天,只知道报错,

最后打开jszip.js里面才看到

需要把base64头部的文件信息去掉,然后手动解决

最后总算搞定了。

这个压缩工具也算不错,不过什么都压缩,但是只有图片会进行处理,如果是其它文件它只会移动了文件而不压缩,即便是改变后缀也不会压缩。

我测试了100多张jpg图片,基本能压缩65%左右,不过不知道什么原因,压缩后用qq的图片浏览器看到居然有问题,其它的地方看到都没问题

最后附上github地址:https://github.com/zoeDylan/z_img

时间: 2024-10-13 23:26:44

好久没发贴了,最近捣鼓了个基于node的图片压缩小网站解析。的相关文章

免费WiFi,只为好久没联系的你们

昨日,认识五年的朋友搬来与我一起住了,说不上来,没有激动,只是突然感觉生活又多了一点生机.兴致上来,晚上立刻联系了已经近四个月没有联系的好友,才知道他们的生活也因这几个月发生了翻天覆地的变化.到底什么才是朋友,我突然想到这个问题,距离的分开,竟也分开了我们想要关心.连接彼此的机会.是这样吗,大家都是如此,再亲的朋友也有断开联系的那天.难道如今在发达的网络社交.沟通方式都无法弥补这种"情结"吗?我舍不得,却也在努力弥补. 有些事,后悔莫及 毕业之后,忙于找工作,找到工作后,忙于工作,现在

好久没来了,重出江湖,共享个python34+pyqt+pyserial串口工具源码

真的是好久没来了,写博客对我来说还真是难坚持下来,热度一过就忘了,就算什么时候想起来也懒得去敲一个字,这次真不知道能坚持多久,随心吧,想写写,不想写也不勉强自己. 最近由于工作调试需要自己写了一个带图形界面的串口工具,使用了python34+pyqt4+pyserial+matplot等实现,之前在电子论坛里共享,发现没多人玩不知道在这里玩的人多不多,共享个github的地址,希望有人可以一起玩:https://github.com/wuliaodew/sci_tool 其他说明可以看下我这个帖

好久没写关于论坛的程序了

最近发现有个很牛逼的论坛,里面有个插件可以直接让支付宝即时付款,具体怎么实现的没看明白,好像是叫一品楼吧,有个收款的地方用的支付宝,但是可以直接选择自动提交付款人信息和付款的金额到支付宝的即时支付界面,好像很高端的样子,还可以提交银行卡号哦,真心很牛逼.求高人解答 好久没写关于论坛的程序了,布布扣,bubuko.com

好久没来了 冒个泡 整理下

判断是否为模拟器 #define isSimulator (NSNotFound != [[[UIDevice currentDevice] model] rangeOfString:@"Simulator"].location) if (isSimulator) { if ([[UIScreen mainScreen] bounds].size.height > 700) { core.device = 2; }else{ core.device = 4; } } cell 下

就是想写点干什么,好久没写了

在美国,呆了两个多月了,生活自在,玩的开心,但工作上,我遇到了一些问题. 工作再多,再累,再难,我不会抱怨半句.心里边,我认为这是体验,是挑战,是机会.但当这个过程里,出现了你心爱的人,那么结果就会很不一样.我现在一边带着耳机听着爱爱的音乐,一边泪如雨下,心情有些复杂. 刚刚在会上,跟他吵过,其实也不算吵,就是争论吧,我抛出的两个方案,第一个又被他批的体无完肤,毫无根据,make no sense,就第二个达成一致.这样的场景,在工作中其实稀松平常,跟别人争,我不示弱,错了也不怕,怕毛,被P掉心

好久没更新了,哪里不对!更新二叉树的非递归遍历

#include <iostream> #include <stack> using namespace std; typedef struct Node { Node* lchild; Node* rchild; int data; }BNode,BTree; void visit(Node*); void inorder(BTree *root) { BNode * p = root; stack<Node*> s; if(p||!s.empty()) { s.pu

[WebApi] 捣鼓一个资源管理器--服务器端分割压缩图片

<打造一个网站或者其他网络应用的文件管理接口(WebApi)第五章"服务器端分割压缩图片"> ======================================================== 作者:qiujuer 博客:blog.csdn.net/qiujuer 网站:www.qiujuer.net 开源库:Genius-Android 转载请注明出处:http://blog.csdn.net/qiujuer/article/details/41826865

java学习笔记-尚硅谷0918班宋*:我想说我已经好久没见过这样的老师了

浑浑噩噩的睡过大学,昏昏沉沉的工作四年,仿佛从离开高中学校的那一天就进入了休眠状态.来尚硅谷java培训之前纠结了很久,有理解也有不支持,对于我来说学习编程不只是为了就业,很重要的一点是我在寻找一种能让自己坚持做的事情,而这种坚持必源于热爱.一点不矫情的讲,我选择学习来北京java培训学些java编程是因为我喜欢. 从基础阶段来看,学校做的很好,宋老师讲课幽默.生动.专业功底扎实,这些都是显而易见的:更可贵的是宋老师的教师作风,例如会叫睡觉的同学站起来,我想说我已经好久没见过这样的老师了(偷笑)

[WebApi] 捣鼓一个资源管理器--多文件上传

<打造一个网站或者其他网络应用的文件管理接口(WebApi)第二章"多文件上传"> ======================================================== 作者:qiujuer 博客:blog.csdn.net/qiujuer 网站:www.qiujuer.net 开源库:Genius-Android 转载请注明出处:http://blog.csdn.net/qiujuer/article/details/41675299 ====