node图片压缩-nodejs使用jimp实现图片处理
2024-04-14 05:05:17
主要用了两个html5的API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下,随着表单提交。
照片是自己用单反拍的,5M多,压缩下面3张分别是600多kb,400多kb,300kb的最后那张失真度很大了,压缩效率蛮高的。
<!DOCTYPEhtml>
<html><head><metacharset="utf-8"/><title>FileAPITest</title><scripttype="text/javascript"src="js/jquery-1.11.0."></script><scripttype="text/javascript"src="js/"></script><style>#test{display:none;}</style></head><body><inputtype="file"id="fileImg"><form><imgsrc=""id="test"alt=""></form><script>functionhandleFileSelect(evt){//varfilebtn=(id);//(filebtn);//varfiles=;//();//(files);varfiles=;for(vari=0,f;f=files[i];i++){//Onlyprocessimagefiles.if(!f.("image.*')){continue;}varreader=newFileReader();//Closuretocapturethefileinformation.=(function(theFile){returnfunction(e){//Renderthumbnail.//([0]);//(e.target);(e.);vari=("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());varquality=50;i.src=(i,quality).src;(i.src);i.="block";};})(f);//ReadintheimagefileasadataURL.(f);}}('fileImg').addEventListener('change',handleFileSelect,false);</script></body></html>
varjic={/***ReceivesanImageObject(canbeJPGORPNG)andreturnsanewImageObjectcompressed*@param{Image}source_img_objThesourceImageObject*@param{Integer}qualityTheoutputqualityofImageObject*@return{Image}result_image_objThecompressedImageObject*/compress:function(source_img_obj,quality,output_format){varmime_type="image/jpeg";if(output_format!=undefined&&output_format=="png"){mime_type="image/png";}varcvs=('canvas');//naturalWidth真实图片的宽度=source_img_;=source_img_;varctx=("2d").drawImage(source_img_obj,0,0);varnewImageData=(mime_type,quality/100);varresult_image_obj=newImage();result_image_=newImageData;returnresult_image_obj;},function****(***)
图片自适应方案讨论延伸到sharpP1、一般来说,我们常见的使用图片的优化方案有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把图片旋转指定的角度。
旋转结果
透明效果
效果
热门标签
