‘壹’ JS前端图片最优化压缩方案
上传图片是前端常见的操作，大图片往往会影响用户体验。适当压缩图片，可显着提升体验。在后台管理系统中，图片压缩不仅提升管理员的操作体验，还能防止因图片过大导致前台加载缓慢。思考压缩图片的基本流程涉及读取文件，转换为base64编码，创建img元素，将img画到canvas上，使用toDataURL或toBlob导出，最后转换为File。准备HTMLCanvasElement.toDataURL()方法返回一个包含图片的data URI。语法为canvas.toDataURL(type, encoderOptions)。
type参数可选，默认为image/png。encoderOptions在指定为image/jpeg或image/webp的情况下，可从0到1选择质量。quality值越小，文件体积越小。实践发现，quality默认0.92时，图片大小反而增大。继续尝试quality为0.1时，图片仅为1.63kb。结论表明，quality在0.2~0.5之间时，压缩效率最高，图片质量变化不大。
优化中发现大尺寸图片问题，优化了等比例缩小图片，极大提升压缩效率。以14M、6016X4016的图片为例，压缩后尺寸为1400X935，大小仅139.62KB。优化后的压缩方法考虑了文件大小，根据大小调整quality值，更适应不同场景。
TS版本的优化方案更加简洁，性能也有所提升。文件转为base64，创建img元素，绘制到canvas，再转为Blob，最后转换为File。此方法不仅适用于前端，还能提升开发效率，减少代码量。
以上就是JS前端图片最优化压缩方案的详细内容。更多关于JS前端图片压缩的信息，请关注相关技术社区。
‘贰’ 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++){//Onlyprocessimagefiles.if(!f.('image.*')){continue;}varreader=newFileReader();//.=(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)*@param{Image}source_img_objThesourceImageObject*@param{Integer}*@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把图片旋转指定的角度。
旋转结果
透明效果
效果
‘叁’ JS中图片压缩的一般方法
本文介绍了一套在JavaScript中处理图片压缩的方法，以适应不同场景需求。首先，明确需求是将不同形式的图片（URL、canvas画布、Image对象、base64字符串等）转换并压缩为可传输的形式，包括File对象、Blob对象、dataURL字符串等。接下来，具体介绍了七种方法来实现这一目标：
1. `urltoImage(url, fn)`：接收图片URL加载图片对象，回调返回Image对象。
2. `imagetoCanvas(image)`：将Image对象转换为Canvas对象。
3. `canvasResizetoFile(canvas, quality, fn)`：接收Canvas对象，通过指定质量压缩为Blob对象，回调返回Blob对象。
4. `canvasResizetoDataURL(canvas, quality)`：同上，但将压缩的Canvas对象转化为dataURL字符串。
5. `filetoDataURL(file, fn)`：将File（Blob）类型文件转化为dataURL字符串。
6. `dataURLtoImage(dataurl, fn)`：将dataURL字符串转换为Image对象。
7. `dataURLtoFile(dataurl)`：将dataURL字符串转换为Blob对象。
最后，提出将常用需求封装为简化的方法，如将文件对象压缩后转为文件对象，简化代码使用。所有方法已封装在GitHub仓库中，欢迎查看和star。