圖片上傳的html5
A. 微信上的html5頁面是怎麼製作出來的
你好，微信上的HTML頁面一般是用工具做出來的，很少有開發的H5案列，最常見是翻頁H5，自由度比較低，只能修改圖片換換位子，而專業工具自由度比較高，可以很靈活的設計H5，epub360在專業工具中上手難度適中，值得大家嘗試下。
B. 怎麼用html5或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片
1、實現頭的方法代碼。
注意事項：
javaScript是一種網路腳本語言，在web應用開發中得到了廣泛的應用，它經常被用來為網頁添加各種動態功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來實現自己的功能。
C. html5拖拽圖片上傳，怎麼獲得圖片原始尺寸
用後台語言去獲取不就可以了。為什麼一定要在前端來獲取圖片原始大小呢？即使你要在前端實用，比如php獲取到了以後還是可以通過變數傳遞給前端的。至於PHP怎麼獲取圖片原始大小這個網上很容易找到資料！
D. html5如何上傳圖片到伺服器
表單，ajax 都可以，具體要看你伺服器要哪種格式了
E. 如何在手機瀏覽器中運用HTML5的文件API實現上傳多圖功能
Html5終於解決了上傳文件的同時顯示文件上傳進度的老問題。現在大部分的網站用Flash去實現這一功能，還有一些網站繼續採用Html <form>with enctype=multipart/form-data，但是需要修改伺服器端可用才能顯示給用戶文件上傳的進度。本質上你需要做的工作是在伺服器端接收一個文件時，你發送給它一個位元組流，所以你需要知道你已經接收到多少位元組並以某種方式傳達這些信息給客戶端瀏覽器，在這個過程一直在不斷的進行文件的上傳。這種方式運行的非常好，不像Flash上傳那這樣充滿了問題(特別是處理大文件上傳的時候)，然而這種方法是相當復雜的並且聽起來不容易理解，因為你本質上是接管了整個伺服器端的處理（獲取位元組流的時候）同時包括了在伺服器端實現multipart/form-data協議，伴隨一系列的其他事情。
使用Html5 上傳文件
XMLHttpRequest 在Html5 規范中已經有全新的變化，規定了XMLHttpRequest Level 2規范（目前最新版本）包含下列新的特性：
處理位元組流，例如作為上傳或者下載的File，Blob，FormData對象
上傳或者下載中的進度事件
跨站點請求
允許創建匿名請求
可以設置請求超時
在這篇文章中我們將能夠更清楚的看到#1和#2兩個特性。通常，上傳文件用XMLHttpRequest並且提供上傳進度信息給最終的用戶，需要注意的是這種方式解決了不需要伺服器端做任何改變，至少是目前處理multipart/form-data協議。所以伺服器端的處理邏輯保留不變，這使得開發者適應這種技術相當容易。
圖1：文件上傳畫面-准備上傳 圖2：顯示上傳完成畫面
注意：上面的圖片中，信息提示區域是提供給用戶的：
當前選中文件的信息
文件名
文件大小
文件類型
上傳完成多少的百分比進度條
上傳速度或者上傳帶寬
距離上傳完成大概還有多長時間
已上傳文件大小
伺服器端的響應
上面第6項或許看起來不重要，但事實上是相當重要的。因為我們用XMLHttpRequest，上傳發生在後台，頁面沒有發生跳轉等任何變化，所以對於你用它處理其他一些事情來說是一個非常好的特性。
Html5 Progress Event
對於Html5 Progress Events規范，Html5 Progess Events提供了下列與本次討論相關的信息
total - 總的位元組數
loaded - 到目前為止上傳的位元組數
lengthComputable - 可計算的已上傳位元組
請注意到我們需要用兩個信息去計算要顯示給用戶的其他所有信息。要計算出來其他的信息通過上面我們得到信息是相當容易的，但是那需要一些額外的代碼並且創建一個定時器。
Html5 Progress Event 應該是什麼
考慮到有一部分人想更好的提供給用戶所有的信息，所以Html5 Progress Event應該更好的滿足需要，因為它給瀏覽器供應商提供這些額外信息是相當簡單的，所以建議progress event應該修改成如下：
total - 總的位元組數
loaded - 到目前為止上傳的位元組數
lengthComputable - 可計算的已上傳位元組
transferSpeed long類型
timeRemaining JavaScript 日期對象
Html5 上傳 用XMLHttpRequest
瀏覽器支持情況
支持這一特性的瀏覽器最低版本
Firefox 4.0 beta 6
Chrome 6
Safari 5.02
IE 9 Beta and Opera 10.62 不支持這一特性
簡單的示例
下面是一個完整的Html頁麵包含了實現文件上傳並帶有進度提示的JavaScript代碼，只是實現了基本的功能，感興趣的可以自己做擴展。 需要吧上傳介面修改成自己服務的。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "upload.do");//修改成自己的介面
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 伺服器端返回響應時候觸發event事件*/
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
F. html5 如何調用手機相冊，進行上傳照片
cordova
用代碼調用硬體，這裡面有個方法可以調用手機的攝像頭，裡面我記得還有個功能查看手機相冊
G. ios html5 拍照上傳 照片調整90度 為什麼上傳之後 又返回來了
它的主要功能就是上傳兩張人像，通過演算法進行分析對比，最後得出一個相似度的分數，以驗證你們是天造地設還是顏值互補。
但是，當我們把上傳的圖片轉換成base64格式，發送給後台時，會發現偶爾會出現問題，有一些圖片本來是這樣的：
柴犬
處理之後卻變成了這樣：
柴犬2
經過測試發現，只有iOS手機豎著拍的照片才會出現這樣的問題，而iOS手機橫著拍的照片、Android手機拍的照片以及通過屏幕截圖、網路下載等途徑獲得的圖片都不會產生這個問題。
那麼，這到底是為什麼呢？
在開發過程中，由於時間緊迫，未求甚解，使用了github上的一個開源項目 lrz.js 來解決此問題，這個工具的主要用途是在盡量保證圖片質量的前提下壓縮圖片的大小，但同時也附帶了圖片旋轉角度糾正的功能。
通過閱讀 lrz.js 的源代碼，我發現它引入了一個叫做 exif.js 的庫來實現旋轉角度的糾正，它提供了js讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。而拍照方向就是關鍵所在！
exif.js 獲取圖像的拍照方向的代碼如下：
EXIF.getData(IMG_FILE, function () { // IMG_FILE為圖像數據
var orientation = EXIF.getTag(this, "Orientation");
console.log("Orientation:" + orientation); // 拍照方向
});
獲取拍照方向的結果為1-8的數字：
拍照方向信息
注意：對於上面的八種方向中，加了*的並不常見，因為它們代表的是鏡像方向，如果不做任何的處理，不管相機以任何角度拍攝，都無法出現鏡像的情況。
這個表格代表什麼意義？我們來看第一行，值為1時，右邊兩列的值分別為：Row #0 is Top，Column #0 is Left side，其實很好理解，它表示照片的第一行位於頂端，而第一列位於左側，那麼這張照片自然就是以正常角度拍攝的。
而這8種結果，就是第一行與第一列所在的位置的8種組合。
那麼，我們來測試一下iOS手機橫著拍的照片，來看看它的拍照方向是什麼呢？
測試1
結果是1，即以正常角度拍攝的，其實也就是原圖啦~
那麼，我們再測試一下iOS手機豎著拍的照片，來看看它的拍照方向是什麼呢？
測試2
原來是6！即第一行位於右側，第一列位於頂端，其實相當於將照片順時針旋轉了90度！
所以，實際上iOS手機豎著拍出的照片與橫著拍出的照片其本質上是一樣的，只不過豎著拍出的照片被添加了一個順時針旋轉90°的拍照方向，所以顯示的時候，就變成了上下邊窄左右邊寬的狀態，其實也就是橫著拍的照片順時針旋轉90°而成的~
那麼明白了這些，文章開頭所說的照片旋轉bug的原因，也就很簡單啦~
其實就是當我們在前端對圖片進行像素處理或者drawInRect等操作之後，照片的Orientaion信息，即為拍照方向信息被刪除了，所以iOS手機豎著拍的照片又回到了橫著的狀態，看起來也就是逆時針旋轉了90°！
那麼如何糾正這個旋轉角度呢？
其實思路也很簡單：在處理圖片之前，先讀取並保存圖片的拍照方向信息，然後在處理圖片之後，再根據拍照方向，對圖片進行相應的調整，lrz.js 中的代碼如下：
switch (orientation) {
case 3:
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
break;
case 6:
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
break;
case 8:
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
break;
case 2:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0, resize.width, resize.height);
break;
case 4:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
break;
case 5:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
break;
case 7:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
break;
default:
ctx.drawImage(img, 0, 0, resize.width,resize.height);
}
其中，translate是平移變換，scale(-1,1)是向左翻轉，rotate是順時針旋轉。
舉例說明 case 2，當圖片的拍照方向為2時，即第一行位於頂端，而第一列位於右側，其實相當於把照片進行了左右的翻轉。所以，這里對圖片的操作是，先向右平移等於圖片寬度的距離，再向左翻轉，這相當於以圖片水平方向的對稱軸為軸進行了左右翻轉，然後再以（0，0）為起始點繪制原寬高的圖片，即完成了對拍照方向的糾正。
最後
經過一系列的測試，發現確實只有iOS手機的豎拍照片與橫拍照片是通過拍照方向來區別的，Android手機無論豎拍還是橫拍的照片，拍照方向都為1，也就是說即使丟失了拍照方向這一信息，也不會影響到圖片的旋轉角度。而手機或電腦的屏幕截圖、網路上的圖片、通過PS製作的圖片等也是如此。
作者：任無名F
鏈接：http://www.jianshu.com/p/ad4501db178e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
H. 你好，我用webuploader.html5only.min.js實現批量圖片上傳，我該怎麼在action中獲取上傳的那些文件呢
1.1 分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
1.2 預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
1.3 多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
1.4 HTML5 & FLASH
兼容主流瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
1.5 MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
1.6 易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
2、引入資源
2.1 下載包內容
├── Uploader.swf // SWF文件，當使用Flash運行時需要引入。
├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本
├── webuploader.flashonly.js // 只有Flash實現的版本。
├── webuploader.flashonly.min.js // min版本
├── webuploader.html5only.js // 只有Html5實現的版本。
├── webuploader.html5only.min.js // min版本
├── webuploader.withoutimage.js // 去除圖片處理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由staticfile提供的cdn版本，或者下載Git項目包。
// SWF文件，當使用Flash運行時需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf
// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js
// 只有Flash實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js
// 只有Html5實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js
// 去除圖片處理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包藉助了Grunt工具來實現
2.3.1 環境依賴
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)
2.3.2 編譯代碼
1.克隆 webuploader git倉庫，git clone https://github.com/fex-team/webuploader.git。
2.安裝node依賴，npm install。
3.執行grunt dist，此動作會在dist目錄下面創建合並版本的js, 包括通過uglify壓縮的min版本。
2.3.3 配置
打開webuploader倉庫根目錄下面的Gruntfile.js文件, 代碼合並有buildtask來完成。找到build配置項。
Gruntfile.js已經配置了一個自定義合並的demo. 打包只支持HTML5的版本
// 自己配置的實例
// glob語法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}
3、angular指令——<web-uploader>
3.1 指令功能
添加一個上傳文件按鈕，可以自行配置上傳文件的類型和過濾規則，且在彈出的模態框中進行操作，支持連續上傳，分類選擇上傳
3.2 使用說明
這里只是使用說明，可能會加一些注意事項，具體參數或者變數說明請參看後面
3.2.1 頁面添加一個指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>
3.2.2 配置上傳類型和過濾規則
上傳類型
type有四種類型，分別為
image：圖片
video：音視頻
flash：flash
file：辦公文檔，壓縮文件等等
過濾規則
accept有四個對象屬性，屬性中包含標題、允許文件後綴、允許的mimetype
3.2.3 指令中綁定彈出模態框的事件
web-uploader這個指令中其實只做了一件事，給元素本身綁定彈出模態框的事件，具體上傳文件是在模態框中完成的
3.2.4 初始化uploader類，配置相關屬性
在模態框控制器中用到了$timeout
$timeout(function(){
//這里是上傳配置代碼
},0)
因為配置uploader時需要事先准備好dom元素，angular打開模態框是非同步而JavaScript是單線程，所以實際上在執行模態框控制器中的代碼時，模態框並沒有打開，也就是dom並沒有載入完成，這會導致WebUploader報a.runningtime is not a function...的錯誤
3.3 指令詳細說明
3.3.1 父級controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允許上傳的類型 圖片/音視頻/flash/文件
$scope.accept = {
//圖片
image: {
title : 'Images',//標題
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允許上傳文件的後綴
mimeTypes : 'image/*'//允許的mimetype
},
//音視頻
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//辦公文檔，壓縮文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};
}])
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
I. PHP、HTML5上傳圖片自動壓縮問題
給你個圖片處理的類吧，圖片剪裁處理後，也就等於將圖片壓縮了。
/**
*圖像處理類
*============================================================================
*Copyright2014大秦科技，並保留所有權利。
*網站地址:http://www.qintech.net；
*============================================================================
*/
classImage{
//生成縮略圖的方式
public$thumbType;
//縮略圖的寬度
public$thumbWidth;
//縮略圖的高度
public$thumbHeight;
//生成縮略圖文件名後綴
public$thumbEndFix;
//縮略圖文件前綴
public$thumbPreFix;
/**
*構造函數
*/
publicfunction__construct(){
$this->thumbType=1;
$this->thumbWidth=120;
$this->thumbHeight=60;
$this->thumbPreFix='';
$this->thumbEndFix='_thumb';
}
/**
*檢測是否為圖像文件
*@param$img圖像
*@returnbool
*/
privatefunctioncheck($img){
$type=array(".jpg",".jpeg",".png",".gif");
$imgType=strtolower(strrchr($img,'.'));
returnextension_loaded('gd')&&file_exists($img)&&in_array($imgType,$type);
}
/**
*獲得縮略圖的尺寸信息
*@param$imgWidth原圖寬度
*@param$imgHeight原圖高度
*@param$thumbWidth縮略圖寬度
*@param$thumbHeight縮略圖的高度
*@param$thumbType處理方式
*1固定寬度高度自增2固定高度寬度自增3固定寬度高度裁切
*4固定高度寬度裁切5縮放最大邊原圖不裁切
*@returnmixed
*/
privatefunctionthumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType){
//初始化縮略圖尺寸
$w=$thumbWidth;
$h=$thumbHeight;
//初始化原圖尺寸
$cuthumbWidth=$imgWidth;
$cuthumbHeight=$imgHeight;
switch($thumbType){
case1:
//固定寬度高度自增
$h=$thumbWidth/$imgWidth*$imgHeight;
break;
case2:
//固定高度寬度自增
$w=$thumbHeight/$imgHeight*$imgWidth;
break;
case3:
//固定寬度高度裁切
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
break;
case4:
//固定高度寬度裁切
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
break;
case5:
//縮放最大邊原圖不裁切
if(($imgWidth/$thumbWidth)>($imgHeight/$thumbHeight)){
$h=$thumbWidth/$imgWidth*$imgHeight;
}elseif(($imgWidth/$thumbWidth)<($imgHeight/$thumbHeight)){
$w=$thumbHeight/$imgHeight*$imgWidth;
}else{
$w=$thumbWidth;
$h=$thumbHeight;
}
break;
default:
//縮略圖尺寸不變，自動裁切圖片
if(($imgHeight/$thumbHeight)<($imgWidth/$thumbWidth)){
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
}elseif(($imgHeight/$thumbHeight)>($imgWidth/$thumbWidth)){
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
}
//}
}
$arr[0]=$w;
$arr[1]=$h;
$arr[2]=$cuthumbWidth;
$arr[3]=$cuthumbHeight;
return$arr;
}
/**
*圖片裁切處理
*@param$img原圖
*@paramstring$outFile另存文件名
*@paramstring$thumbWidth縮略圖寬度
*@paramstring$thumbHeight縮略圖高度
*@paramstring$thumbType裁切圖片的方式
*1固定寬度高度自增2固定高度寬度自增3固定寬度高度裁切
*4固定高度寬度裁切5縮放最大邊原圖不裁切6縮略圖尺寸不變，自動裁切最大邊
*@returnbool|string
*/
publicfunctionthumb($img,$outFile='',$thumbWidth='',$thumbHeight='',$thumbType=''){
if(!$this->check($img)){
returnfalse;
}
//基礎配置
$thumbType=$thumbType?$thumbType:$this->thumbType;
$thumbWidth=$thumbWidth?$thumbWidth:$this->thumbWidth;
$thumbHeight=$thumbHeight?$thumbHeight:$this->thumbHeight;
//獲得圖像信息
$imgInfo=getimagesize($img);
$imgWidth=$imgInfo[0];
$imgHeight=$imgInfo[1];
$imgType=image_type_to_extension($imgInfo[2]);
//獲得相關尺寸
$thumb_size=$this->thumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType);
//原始圖像資源
$func="imagecreatefrom".substr($imgType,1);
$resImg=$func($img);
//縮略圖的資源
if($imgType=='.gif'){
$res_thumb=imagecreate($thumb_size[0],$thumb_size[1]);
$color=imagecolorallocate($res_thumb,255,0,0);
}else{
$res_thumb=imagecreatetruecolor($thumb_size[0],$thumb_size[1]);
imagealphablending($res_thumb,false);//關閉混色
imagesavealpha($res_thumb,true);//儲存透明通道
}
//繪制縮略圖X
if(function_exists("imageresampled")){
imageresampled($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}else{
imageresized($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}
//處理透明色
if($imgType=='.gif'){
imagecolortransparent($res_thumb,$color);
}
//配置輸出文件名
$imgInfo=pathinfo($img);
$outFile=$outFile?$outFile:dirname($img).'/'.$this->thumbPreFix.$imgInfo['filename'].$this->thumbEndFix.".".$imgInfo['extension'];
Files::create(dirname($outFile));
$func="image".substr($imgType,1);
$func($res_thumb,$outFile);
if(isset($resImg))
imagedestroy($resImg);
if(isset($res_thumb))
imagedestroy($res_thumb);
return$outFile;
}
}