您的位置：首页 > 百科管理 > 详情

nodejs 生成海报-node图片压缩-nodejs使用jimp实现图片处理

原创：找图网 2023-07-07 14:46:08

Nodejs利用phantom 将html生成图片

官网地址:

首先通过命令 npm install --save phantom 安装phantom 【本篇文章Node版本为6.X】

运行:

我们可以看到同级目录多了一个

node图片压缩-nodejs使用jimp实现图片处理

怎么用JavaScript在线压缩图片

主要用了两个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++){//(!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****(***)

图片自适应方案讨论延伸到sharpP

1、一般来说,我们常见的使用图片的优化方案有base64编码、雪碧图、字体图片、图片压缩等

base64编码

(1优势:减少http的请求次数;当然字符串那么长可以放后台数据也可以使用类似node来构建(例如:(dir).toString(‘bse64’))

(2劣势:图片太多、太大(大于2KB)的话就不好玩了,好high长的字符串

合成sprite图

(1优势:减少http的请求次数;不用担心图片太多太杂

(2劣势:生成图片体积就比较大了,不利于并行加载

字体图标

(1优势:简单,容易生成,体积也小

(2劣势:适合移动端或兼容性高的浏览器,而且复杂的图案就不好搞了

图片压缩