扫描二维码添加客服微信
扫描二维码关注
node 图片压缩-Nodejs之gulp用法总结
怎么用JavaScript在线压缩图片
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下,随着表单提交。
照片是自己用单反拍的,5M多,压缩下面3张分别是600多kb,400多kb,300kb的最后那张失真度很大了,压缩效率蛮高的。
<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0."></script> <script type="text/javascript" src="js/"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = (id); // (filebtn); // var files = ; // (); // (files); var files = ; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. = (function(theFile) { return function(e) { // Render thumbnail. // ([0]); // (e.target); (e.); var i = ("test"); i.src = ; ($(i).width()); ($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); ($(i).width()); ($(i).height()); var quality = 50; i.src = (i,quality).src; (i.src); i. = "block"; }; })(f); // Read in the image file as a data URL. (f); } } ('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>
var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = ('canvas'); //naturalWidth真实图片的宽度 = source_img_; = source_img_; var ctx = ("2d").drawImage(source_img_obj, 0, 0); var newImageData = (mime_type, quality/100); var result_image_obj = new Image(); result_image_ = newImageData; return result_image_obj; }, function ****(***)
Nodejs之gulp用法总结
一、nodeJS基础操作
(一)、安装nodeJS (node -v)
(二)、npm 包管理工具 (cnpm安装 : npm install gulp -g)
(三)、在项目中初始化 (nodejs的配置文件,在项目中安装的模块,会记录在) npm init
(四)、在其他位置需要配置相关模块时,只需把拷贝过来,执行 npm install,即可自动安装所需模块
二、gulp
1. 安装 (gulp -v)
(1)全局安装 npm i gulp -g
(2)本地安装: npm i gulp --save-dev
2. 在项目根目录创建
3. () () () () ()
4. gulp插件: (1)压缩css (2)压缩js (3) 合并js (4) 压缩图片 (5)自动添加前缀 autoprefixer (6)sass编译 (7)热刷新
Squoosh 批量高质量压缩图片
最近手里有一大批相机图片,需要分享给团队人员。但是原文件出来的图片太大,整整有几十个G。团队人员又不需要原图,只需要有全部的照片即可。为此,想把图片压缩成高质量图片以减少体积。
由于一直在用Google相册,对它之前采用高质量上传的图片印象不错,于是搜了搜Google的图片高质量压缩工具,找到了Squoosh。
浏览器输入网址 / 即可访问Squoosh。Squoosh本身可离线使用,而且拥有美观界面,单独压缩几张图片相当给力。
可以看到,80%压缩质量肉眼基本上分辨不出来区别,但是文件大小下降了三分之二。
但是这个界面只能一张张手工操作,对于几十个G图片来说就是个噩梦。网上搜了下squoosh批量压缩,竟然没有找到一篇合适、准确的介绍,没办法只能自己慢慢摸索。
在界面下方找到了Sqoosh CLI,应该是命令行版本的,点进去进入GitHub仓库。
[图片上传失败...(image-ed2ba2-1624621975250)]/cli/
]( )
看了下说明,应该不需要安装别的东西,能直接使用:
我能直接使用,要是不能用的话,可以先去安装一下nodejs。
使用方法:
注意
:这里有个坑,复制出来的参数直接用会报错,需要把 ' 和 " 给全部去掉才可以。
-
果盘绘画图片大全简单创作方法快速制作技巧2024-01-02 16:57:54
-
小年插画图片创作方法快速制作技巧2024-01-02 16:57:20
-
小年绘画作品制作技巧2024-01-02 16:55:45
-
小年插画图片创作方法快速制作技巧
2024-01-02 16:55:02
-
立春插画图片如何制作2024-01-02 16:54:19
-
立春插画图片创作方法快速制作技巧2024-01-02 16:53:32
