扫描二维码添加客服微信
扫描二维码关注
node 图片压缩-nodejs使用jimp实现图片处理
怎么用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 ****(***)
图片自适应方案讨论延伸到sharpP
1、一般来说,我们常见的使用图片的优化方案有base64编码、雪碧图、字体图片、图片压缩等
base64编码
(1 优势:减少http的请求次数;当然字符串那么长可以放后台数据也可以使用类似node来构建(例如:(dir).toString(‘bse64’))
(2 劣势:图片太多、太大(大于2KB)的话就不好玩了,好high长的字符串
合成sprite图
(1 优势:减少http的请求次数;不用担心图片太多太杂
(2 劣势:生成图片体积就比较大了,不利于并行加载
字体图标
(1 优势:简单,容易生成,体积也小
(2 劣势:适合移动端或兼容性高的浏览器,而且复杂的图案就不好搞了
图片压缩
(1 优势:因为是有损或无损压缩减少图片大小,所以图片流量就小了
(2 劣势:服务器自然需要支持了
2、sharpP是腾讯公司SNG即通产品部音视频技术中心推出的一种图片压缩组件,现已支持iOS、Android、Windows、Linux四个平台。编码压缩率、编码耗时、解码耗时相比webP有明显的优势。
sharpP采用有损压缩,转换工具会读取原图质量参数,适当降低
nodejs使用jimp实现图片处理
在开发中,图片处理是逃不开的一个问题。 jimp 插件可以非常方便的实现图片的一些常见操作。
jimp插件支持常见的图片格式:
使用read方法把图片资源进行读取。读取之后可以使用jimp提供的API对图片做更多的操作。
原图
缩放之后
crop( x, y, w, h)
参数分别表示开始位置的x,y以及裁剪的宽和高
裁剪的结果
rotate把图片旋转指定的角度。
旋转结果
透明效果
效果
-
果盘绘画图片大全简单创作方法快速制作技巧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
