『壹』 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。