目錄

1. 背景

2. 實(shí)現(xiàn)思路

2.1. 尺寸動(dòng)態(tài)變化

2.2. 實(shí)時(shí)裁剪并靜態(tài)化

3. web或代理服務(wù)器插件實(shí)現(xiàn)方案

1. 背景

某天我的前同事給我打電話，說(shuō)他們的負(fù)載很高，經(jīng)查發(fā)現(xiàn)網(wǎng)站首頁(yè)有20M，原因是首頁(yè)直接引用高清圖片，沒(méi)有安裝分辨率生成縮圖。于是我便想出了下面的方案。

我認(rèn)為方案需求有如下幾個(gè)要素：

圖片壓縮

尺寸修改

圖片緩存

帶寬因素

例如用戶使用手機(jī)訪問(wèn)網(wǎng)站，手機(jī)屏幕尺寸非常多樣化，常見(jiàn)的有QVGA(320×240)、HGVA(480×320)、WVGA(800×480)、QCIF(176×144)、SVGA(640x480)、WXGA(1280×800)。如果一個(gè)用戶的手機(jī)屏幕是320×240，打開(kāi)網(wǎng)站后顯示1027*768圖片很不切合實(shí)際。同時(shí)用戶也多出不少帶寬開(kāi)銷。

我們需要給用戶更好的體驗(yàn)，就要多從用戶的角度去考慮，如根據(jù)用戶網(wǎng)速，帶寬，分辨率，為用戶提供更適合他終端的多媒體資源。

2. 實(shí)現(xiàn)思路

2.1. 尺寸動(dòng)態(tài)變化

B/S結(jié)構(gòu)應(yīng)用程序無(wú)法獲取客戶端的分辨率等信息，我們將采用Javascript取出參數(shù)，然后告知服務(wù)器端。

有下面幾種實(shí)現(xiàn)方式：

通過(guò)cookie

post傳遞給服務(wù)器，然后存儲(chǔ)在session中

get 傳遞給服務(wù)器，然后存儲(chǔ)在session中

僅舉一個(gè)例子

<script type="text/javascript"> $(function(){var width=window.screen.height;var height=window.screen.width;$.post('http://www.example.com/screen/resize.html',{w:width,h:height}); }); </script>

HTML頁(yè)面中的圖片的引用路徑

<img src="http://img.example.com/sample.jpg" />

圖片服務(wù)器rewrite處理

http://img.example.com/sample.jpg => http://img.example.com/index.php/sample.jpg

index.php會(huì)首先載入sample.jpg文件，然后綜合網(wǎng)速，帶寬，分辨率等因素，重新壓縮圖片，修改尺寸，發(fā)送mime頭，輸出正文。

2.2. 實(shí)時(shí)裁剪并靜態(tài)化

為了防止圖片地址沖突，我們首先需要URL唯一化，這樣每訪問(wèn)一次會(huì)生成一張符合你需求尺寸的圖片。

http://img.example.com/sample_(width)x(height)_(quality).jpg

<img src="http://img.example.com/sample_1980x1080_100.jpg" /> <img src="http://img.example.com/sample_800x600_80.jpg" /> <img src="http://img.example.com/sample_640x480_50.jpg" />

配置nginx通過(guò)try_files配置項(xiàng)可以實(shí)現(xiàn)檢查靜態(tài)文件是否存在，如果不存在邊調(diào)用index.php生成圖片，當(dāng)再次訪問(wèn)時(shí)會(huì)直接讀取靜態(tài)文件，不會(huì)再重新生成。

server {listen 80;server_name inf.example.com;charset utf-8;access_log /var/log/nginx/inf.example.com.access.log main;error_log /var/log/nginx/inf.example.com.error.log;location / {root /www/example.com/inf.example.com/images;index index.html;try_files $uri $uri/ /index.php?_url=$request_uri;}#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ .php$ {# proxy_pass http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000#location ~ /index.php$ {root html;fastcgi_pass 127.0.0.1:9000;fastcgi_index index.php;fastcgi_param SCRIPT_FILENAME /www/example.com/inf.example.com/frontend/public$fastcgi_script_name;include fastcgi_params;}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one#location ~ /.ht {deny all;} }

通過(guò)這種方法還可以實(shí)現(xiàn)更復(fù)雜的需求，例如調(diào)整亮度，對(duì)比度，飽和度，色階，圖層疊加等等......

3. web或代理服務(wù)器插件實(shí)現(xiàn)方案

首先我們要將分辨率參數(shù)放到cookie中，因?yàn)閣eb服務(wù)器是可以跟蹤cookie數(shù)據(jù)的

通過(guò) web 擴(kuò)展實(shí)現(xiàn)，例如我們開(kāi)發(fā)一個(gè)apache插件，編譯后是".so"文件，配置httpd.conf載入插件，插件具體功能是綜合網(wǎng)速，帶寬，分辨率等因素，重新壓縮圖片，修改尺寸，最后展現(xiàn)圖片。

反向代理與web服務(wù)器實(shí)現(xiàn)原理相同

總結(jié)：這種方案可以非常方便輸出不同尺寸的圖片，但是一定要注意黑客攻擊。

netkiller：怎樣制作RPM包?zhuanlan.zhihu.comnetkiller：數(shù)據(jù)庫(kù)與圖片完美解決方案?zhuanlan.zhihu.comnetkiller：Tomcat 安全配置與性能優(yōu)化?zhuanlan.zhihu.comnetkiller：Linux 系統(tǒng)安全與優(yōu)化配置?zhuanlan.zhihu.comnetkiller：網(wǎng)站防刷方案?zhuanlan.zhihu.comnetkiller：數(shù)據(jù)庫(kù)恢復(fù)方案?zhuanlan.zhihu.comnetkiller：Java 二進(jìn)制文件操作大全?zhuanlan.zhihu.comnetkiller：數(shù)據(jù)庫(kù)進(jìn)程間通信解決方案（二）?zhuanlan.zhihu.comnetkiller：數(shù)據(jù)庫(kù)進(jìn)程間通信解決方案（一）?zhuanlan.zhihu.comnetkiller：Shell 高級(jí)編程?zhuanlan.zhihu.comnetkiller：網(wǎng)站靜態(tài)內(nèi)容出版解決方案?zhuanlan.zhihu.com

總結(jié)

以上是生活随笔為你收集整理的mybatis3 没有生成example_网站图片尺寸自动生成的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。