在我們?nèi)粘９ぷ髦袝?huì)碰到很多圖片處理業(yè)務(wù),如圖片上傳仓坞，圖片壓縮背零，圖片存儲(chǔ)、縮略圖等,今天給大家分享在H5應(yīng)用中和圖片處理相關(guān)的常用技術(shù)點(diǎn)无埃。本文所采用的example如果不能下載 請(qǐng)?jiān)L問

http://www.imwinlion.com/archives/158

假設(shè)我們有這么一個(gè)場(chǎng)景徙瓶，母親節(jié)來啦，客戶需要一個(gè)曬圖的h5小應(yīng)用,每個(gè)用戶只要曬一張母親的圖嫉称，寫上一句對(duì)母親的祝福侦镇，分享到朋友圈，就能獲得一次抽獎(jiǎng)的機(jī)會(huì)织阅。

那這個(gè)H5小應(yīng)用有哪些技術(shù)點(diǎn)和難點(diǎn)呢?

1虽缕、關(guān)于JS前端圖片壓縮

這個(gè)場(chǎng)景的難點(diǎn)在于圖片壓縮，為什么是圖片預(yù)處理呢?首先蒲稳，因?yàn)楫?dāng)前用戶基本上是大屏手機(jī)氮趋，一個(gè)圖1-4M,是很正常的，但是用戶參與活動(dòng)的時(shí)候江耀，未必愿意花這個(gè)流量剩胁，這樣這個(gè)活動(dòng)關(guān)上傳圖片這一步，就會(huì)降低很多用戶參與的欲望了祥国。其次昵观，用戶的網(wǎng)絡(luò)狀態(tài)未必很好，雖然用戶3G很普遍舌稀，4G成規(guī)模啊犬，WIFI熱點(diǎn)也很多，但是上傳這么大的一張圖壁查，以2M估算觉至，每秒上傳速度100KB，也要20秒睡腿，難保這20秒時(shí)間網(wǎng)絡(luò)不出任何差錯(cuò)语御。再次，用戶未必愿意等待這么長(zhǎng)的時(shí)間席怪。解決方案在哪里?,答案是前端壓縮应闯，這里筆者常用的插件是lrz下載地址如下，也給個(gè)demo挂捻，

$('#uploadphoto').localResizeIMG({

width:400,

quality:1,

success:function(result){

varsubmitData={

data:result.clearBase64,

};

$('.loading').show();

$("#prevImg").attr("src",result.base64);

$.ajax({

type:"POST",

url:"{:U('Album/uploadb64',array('id'=>$appid))}",

data:submitData,

dataType:"json",

success:function(data){

$("#prevImg").attr("src",data.url);

$('#imgurl').val(data.url);

$('.loading').hide();

},

complete:function(XMLHttpRequest,textStatus){

$('.loading').hide();

},

error:function(XMLHttpRequest,textStatus,errorThrown){//上傳失敗

alert("額,出錯(cuò)了,請(qǐng)上報(bào)給管理員吧");

$('.loading').hide();

}

});

}

});

復(fù)制代碼點(diǎn)擊這里下載 localresizeimg,如果不能下載碉纺，請(qǐng)?jiān)L問http://www.imwinlion.com/archives/158

2、關(guān)于圖片異步上傳

用戶在提交圖片的時(shí)候，我們需要好的用戶體念骨田，必須要使用異步上傳插件唬涧，這里百度一下，有很多盛撑，但一般太重碎节，引入的文件太多，筆者推薦自己寫的 jquery.attach.js,3KB,功能強(qiáng)大抵卫，文檔見

jquery.attach.js,簡(jiǎn)單好用的文件上傳插件

http://www.imwinlion.com/archives/143

3狮荔、關(guān)于base64圖片存儲(chǔ)問題

一般圖片在前端通過JS壓縮后，會(huì)以base65的格式存儲(chǔ)起來介粘，然后上傳到后端殖氏，那么后端怎么進(jìn)行存儲(chǔ)呢?這里用php示意functionbase64toimage($strBase64,$dstPath){

$ifp=fopen($dstPath,"wb");

fwrite($ifp,base64_decode($strBase64));

fclose($ifp);

return($dstPath);

}

復(fù)制代碼其中$strbase64是前端通過lzrz控件傳遞過來的base64字符串，$dstPath 是文件存儲(chǔ)的目標(biāo)路徑

如果自己用jquery ajax 異步上傳base64文件需要注意姻采，因?yàn)閖quey 會(huì)把其中特殊的幾個(gè)字符轉(zhuǎn)碼掉雅采，因此最好用urlencode 處理掉再通過ajax 傳輸，后端用urldecode解碼后再處理base64 內(nèi)容

4慨亲、如何設(shè)計(jì)圖片文件存儲(chǔ)的名稱和路徑策略

這個(gè)問題的實(shí)質(zhì)是如何設(shè)計(jì)上節(jié) 的$dstPath問題婚瓜。是為什么會(huì)有這個(gè)問題呢?筆者在日常開發(fā)種發(fā)現(xiàn)很多圖片存儲(chǔ)無設(shè)計(jì)， 所以的到的圖片大概是這樣的

http://www.imwinlion.com/wp-content/uploads/2016/04/新建圖像-300×300.png

像這種圖片結(jié)構(gòu)刑棵，在應(yīng)用根目錄下新建一個(gè)upload 文件夾巴刻，然后下面分日期/uploads/2016/04/ 在小型的應(yīng)用中，還能將就著用的蛉签，但是一旦圖片數(shù)目多起來胡陪，并且要存儲(chǔ)的是圖片的id時(shí)，我們?cè)撛趺醋瞿?筆者研讀阿里的 fastfs碍舍，并經(jīng)過大量的應(yīng)用實(shí)踐柠座，積累了一套實(shí)用好操作的圖片命名策略，如下

[hostid][level][dirstr][filename][suffix]

這種名稱策略怎么理解呢?

hostid:圖片服務(wù)器資源ID.這個(gè)涉及到我們自身的服務(wù)器資源規(guī)劃問題片橡。自定義的妈经，比如我們應(yīng)用占用了倆臺(tái)服務(wù)器資源帆离，一臺(tái)是應(yīng)用服務(wù)器，我們編號(hào)為0肆糕，一臺(tái)是資源服務(wù)器妒穴，我們將這個(gè)服務(wù)器資源編號(hào)為1借宵，這個(gè)數(shù)據(jù)就是hostid

level:相對(duì)于圖片服務(wù)根目錄來說，圖片存儲(chǔ)的文件夾目錄深度，一般為倆層了嚎。比如我們存儲(chǔ)的根目錄為 /mnt/h5app/，那么這下面 的 目錄 a/b/c,level就是3

dirstr:目錄字符串，如上歪泳，目錄字符串就是abc

filename: md5 策略或者uuid 策略生成 的文件名萝勤，如md5(microtime() . mt_rand(1000,9999));

suffix:文件的后綴，如.jpg,.png

舉個(gè)列子呐伞。假設(shè)我們的應(yīng)用服務(wù)器服務(wù)器,編號(hào)是0敌卓，根目錄是/alidata/www/www.imwinlion.com/ ,對(duì)應(yīng)的域名是www.imwinlion.com

我們的圖片服務(wù)器有三臺(tái)，一臺(tái)編號(hào)是1,目錄是/mnt/www.imwinlion.com/ ,對(duì)應(yīng)的域名是res1.imwinlion.com

另一臺(tái)編號(hào)是2,根目錄是/mnt/www.imwinlion.cn/,對(duì)應(yīng)的域名是res2.imwinlion.com

現(xiàn)在,我們根據(jù)我們?cè)O(shè)計(jì)的文件存儲(chǔ)策略伶氢，假設(shè)名稱是13abc01f9c76ce5c45aeec2e6f816c95b854b.jpg趟径，那么根據(jù)問價(jià)夾的第1位數(shù)字，知道這個(gè)文件hostid 是1癣防，

應(yīng)該存放在編號(hào)為1的服務(wù)器蜗巧，也就是/mnt/www.imwinlion.com/ 下

根據(jù)第二個(gè)參數(shù)level 為3，我們知道這個(gè)文件有3個(gè)父級(jí)子目錄蕾盯，那么接下來的三個(gè)字母abc 就是dirstr 幕屹， 接下來的01f9c76ce5c45aeec2e6f816c95b854b 是md5 生成的隨機(jī)字符串

最后.jpg 是文件格式，那么這個(gè)文件的存儲(chǔ)路徑應(yīng)該是這樣

/mnt/www.imwinlion.com/a/b/c/13abc01f9c76ce5c45aeec2e6f816c95b854b.jpg

對(duì)應(yīng)訪問地址是這樣 http://res1.imwinlion.com/a/b/c/13abc01f9c76ce5c45aeec2e6f816c95b854b.jpg,文件id 就是文件名稱 13abc01f9c76ce5c45aeec2e6f816c95b854b.jpg

我們數(shù)據(jù)庫存這個(gè)id 级遭，前端只要根據(jù)策略和這個(gè)ID就能夠獲得 圖片路徑

這種策略的核心在于先根據(jù)業(yè)務(wù)邏輯規(guī)劃出圖片存放路徑望拖。是先知道了文件路徑，然后再存儲(chǔ)挫鸽。但是我們常用的框架靠娱，把文件的命名策略封閉起來了，我們只能先存起來掠兄，再獲得文件名像云。這需要改造！蚂夕！

5迅诬、圖片的服務(wù)器端自動(dòng)縮略圖

服務(wù)器端自動(dòng)縮略圖機(jī)制有很多，有應(yīng)用自動(dòng)縮略圖婿牍，比如php我們可以選擇 timthumb.php 侈贷。 點(diǎn)擊下面下載

timthumb 如果不能下載，請(qǐng)?jiān)L問http://www.imwinlion.com/archives/158

采用該機(jī)制需要注意 等脂，132 行左右

你需要把你的 域名添加到$ALLOWED_SITES 數(shù)組中俏蛮，//?If?ALLOW_EXTERNAL?is?true?and?ALLOW_ALL_EXTERNAL_SITES?is?false,?then?external?images?will?only?be?fetched?from?these?domains?and?their?subdomains.

if(!isset($ALLOWED_SITES)){

$ALLOWED_SITES=array(‘youhost.com’,’imwinlion.com’);

}

復(fù)制代碼

筆者采用的是另外一種。自建nginx 圖片服務(wù)器上遥，安裝image_filter 模塊

server{

listen80;

server_name?img.imwinlion.com;

index?index.html?index.htm?index.php;

root/alidata/mnt/imwinlion;

location~.*\.(php|php5)?$

{

fastcgi_pass127.0.0.1:9000;

fastcgi_index?index.php;

include?fastcgi.conf;

}

location~(.*)\.(gif|jpg|jpeg|png|PNG|JPG|JPEG)\!(\d+)x(\d+)$

{

try_files?$1.$2/emptylast;

image_filter_interlace?on;

image_filter_jpeg_quality90;

image_filter?resize?$3?$4;

image_filter_buffer3M;

}

location~.*\.(gif|jpg|JPG|PNG|GIF|BMP|jpeg|png|bmp|swf)$

{

expires30d;

}

location~.*\.(js|css)?$

{

expires1h;

}

access_log/dev/null;

}

推薦一下本人目前正在寫的一本書

互聯(lián)網(wǎng)入門級(jí)編碼人員搏屑，設(shè)計(jì)師，產(chǎn)品經(jīng)理粉楚，系統(tǒng)后端工程師辣恋，DBA亮垫，以及想懂一點(diǎn)點(diǎn)技術(shù)的老板--你們可以把這本書買回去，送給和你一起創(chuàng)業(yè)兄弟們伟骨。

本書地址 ? ?http://yuedu.baidu.com/ebook/977275a5767f5acfa0c7cd55

部分目錄如下,本人微信號(hào)betaniao,加我請(qǐng)寫 ? 簡(jiǎn)叔推薦