新聞資訊
在上一篇文章里，介紹了《純HTML5上傳圖片文件(帶進度條和預覽)》，本文介紹的HTML5圖片上傳程序，是有裁剪功能的，即是只上傳裁剪的部分，而不是上傳整張圖片。
在開始之前，先介紹一下程序的運行過程。
3 步過程：選擇文件 -> 裁剪 -> 上傳。
在選擇文件時，我們會檢查文件類型和大小（以避免文件過大）。當上傳了裁剪后的圖像時，我們將接受（上傳）這個文件到我們的網站（到某個文件夾）。請注意，處理圖像需要 GD 庫。
帶裁剪功能的HTML5圖片上傳程序
步驟 1. HTML
我們的第一步是 html 標記。首先，我們必須將樣式和腳本放在 HEAD 部分：
<script?src="js/jquery.min.js"></script>
<script?src="js/jquery.Jcrop.min.js"></script>
<script?src="js/script.js"></script>
現在，在 BODY 部分，我們可以放置表單：
????
????
????????
????????
????????
????????
????????
????????Step1:?Please?select?image?file
????????
????????
????????
????????????Step2:?Please?select?a?crop?region
????????????
????????????
?????????????????
?????????????????
?????????????????
?????????????????
?????????????????
???????????? ????????????
????????
????
這是通常的上傳表單，帶有隱藏和可見字段。
第 2 步. CSS
現在，CSS 樣式風格化表單。
css/main.css
.bheader?{
????background-color:?#DDDDDD;
????border-radius:?10px?10px?0?0;
????padding:?10px?0;
????text-align:?center;
}
.bbody?{
????color:?#000;
????overflow:?hidden;
????padding-bottom:?20px;
????text-align:?center;
????background:?-moz-linear-gradient(#ffffff,?#f2f2f2);
????background:?-ms-linear-gradient(#ffffff,?#f2f2f2);
????background:?-webkit-gradient(linear,?left?top,?left?bottom,?color-stop(0%,?#ffffff),?color-stop(100%,?#f2f2f2));
????background:?-webkit-linear-gradient(#ffffff,?#f2f2f2);
????background:?-o-linear-gradient(#ffffff,?#f2f2f2);
????filter:?progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',?endColorstr='#f2f2f2');
????-ms-filter:?"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',?endColorstr='#f2f2f2')";
????background:?linear-gradient(#ffffff,?#f2f2f2);
}
.bbody?h2,?.info,?.error?{
????margin:?10px?0;
}
.step2,?.error?{
????display:?none;
}
.error?{
????font-size:?18px;
????font-weight:?bold;
????color:?red;
}
.info?{
????font-size:?14px;
}
label?{
????margin:?0?5px;
}
input?{
????border:?1px?solid?#CCCCCC;
????border-radius:?10px;
????padding:?4px?8px;
????text-align:?center;
????width:?70px;
}
.jcrop-holder?{
????display:?inline-block;
}
input[type=submit]?{
????background:?#e3e3e3;
????border:?1px?solid?#bbb;
????border-radius:?3px;
????-webkit-box-shadow:?inset?0?0?1px?1px?#f6f6f6;
????box-shadow:?inset?0?0?1px?1px?#f6f6f6;
????color:?#333;
????font:?bold?12px/1?"helvetica?neue",?helvetica,?arial,?sans-serif;
????padding:?8px?0?9px;
????text-align:?center;
????text-shadow:?0?1px?0?#fff;
????width:?150px;
}
input[type=submit]:hover?{
????background:?#d9d9d9;
????-webkit-box-shadow:?inset?0?0?1px?1px?#eaeaea;
????box-shadow:?inset?0?0?1px?1px?#eaeaea;
????color:?#222;
????cursor:?pointer;
}
input[type=submit]:active?{
????background:?#d0d0d0;
????-webkit-box-shadow:?inset?0?0?1px?1px?#e3e3e3;
????box-shadow:?inset?0?0?1px?1px?#e3e3e3;
????color:?#000;
}
步驟 3. JS
以下是實現代碼。
js/.js
//?convert?bytes?into?friendly?format
function?bytesToSize(bytes)?{
????var?sizes?=?['Bytes',?'KB',?'MB'];
????if?(bytes?==?0)?return?'n/a';
????var?i?=?parseInt(Math.floor(Math.log(bytes)?/?Math.log(1024)));
????return?(bytes?/?Math.pow(1024,?i)).toFixed(1)?+?'?'?+?sizes[i];
};
//?check?for?selected?crop?region
function?checkForm()?{
????if?(parseInt($('#w').val()))?return?true;
????$('.error').html('Please?select?a?crop?region?and?then?press?Upload').show();
????return?false;
};
//?update?info?by?cropping?(onChange?and?onSelect?events?handler)
function?updateInfo(e)?{
????$('#x1').val(e.x);
????$('#y1').val(e.y);
????$('#x2').val(e.x2);
????$('#y2').val(e.y2);
????$('#w').val(e.w);
????$('#h').val(e.h);
};
//?clear?info?by?cropping?(onRelease?event?handler)
function?clearInfo()?{
????$('.info?#w').val('');
????$('.info?#h').val('');
};
//?Create?variables?(in?this?scope)?to?hold?the?Jcrop?API?and?image?size
var?jcrop_api,?boundx,?boundy;
function?fileSelectHandler()?{
????//?get?selected?file
????var?oFile?=?$('#image_file')[0].files[0];
????//?hide?all?errors
????$('.error').hide();
????//?check?for?image?type?(jpg?and?png?are?allowed)
????var?rFilter?=?/^(image\/jpeg|image\/png)$/i;
????if?(!?rFilter.test(oFile.type))?{
????????$('.error').html('Please?select?a?valid?image?file?(jpg?and?png?are?allowed)').show();
????????return;
????}
????//?check?for?file?size
????if?(oFile.size?>?250?*?1024)?{
????????$('.error').html('You?have?selected?too?big?file,?please?select?a?one?smaller?image?file').show();
????????return;
????}
????//?preview?element
????var?oImage?=?document.getElementById('preview');
????//?prepare?HTML5?FileReader
????var?oReader?=?new?FileReader();
????????oReader.onload?=?function(e)?{
????????//?e.target.result?contains?the?DataURL?which?we?can?use?as?a?source?of?the?image
????????oImage.src?=?e.target.result;
????????oImage.onload?=?function?()?{?//?onload?event?handler
????????????//?display?step?2
????????????$('.step2').fadeIn(500);
????????????//?display?some?basic?image?info
????????????var?sResultFileSize?=?bytesToSize(oFile.size);
????????????$('#filesize').val(sResultFileSize);
????????????$('#filetype').val(oFile.type);
????????????$('#filedim').val(oImage.naturalWidth?+?'?x?'?+?oImage.naturalHeight);
????????????//?destroy?Jcrop?if?it?is?existed
????????????if?(typeof?jcrop_api?!=?'undefined')?{
????????????????jcrop_api.destroy();
????????????????jcrop_api?=?null;
????????????????$('#preview').width(oImage.naturalWidth);
????????????????$('#preview').height(oImage.naturalHeight);
????????????}
????????????setTimeout(function(){
????????????????//?initialize?Jcrop
????????????????$('#preview').Jcrop({
????????????????????minSize:?[32,?32],?//?min?crop?size
????????????????????aspectRatio?:?1,?//?keep?aspect?ratio?1:1
????????????????????bgFade:?true,?//?use?fade?effect
????????????????????bgOpacity:?.3,?//?fade?opacity
????????????????????onChange:?updateInfo,
????????????????????onSelect:?updateInfo,
????????????????????onRelease:?clearInfo
????????????????},?function(){
????????????????????//?use?the?Jcrop?API?to?get?the?real?image?size
????????????????????var?bounds?=?this.getBounds();
????????????????????boundx?=?bounds[0];
????????????????????boundy?=?bounds[1];
????????????????????//?Store?the?Jcrop?API?in?the?jcrop_api?variable
????????????????????jcrop_api?=?this;
????????????????});
????????????},3000);
????????};
????};
????//?read?selected?file?as?DataURL
????oReader.readAsDataURL(oFile);
}
開頭有幾個常用函數：、、和。它們很簡單。接下來的函數（）比較復雜，基本上就是這個main函數了。當我們選擇了一個文件（圖像文件）后，我們將檢查這個文件的類型和大小。你可以在這里看到圖像格式的過濾器：png 和 jpg。另外，我們不需要非常大的圖像，我認為 250kb 已經足夠了。然后，如果一切正常，我們可以使用 ::（html5 函數）讀取我們選擇的文件。而且，一旦它加載完畢，我們就可以繼續，我們應該顯示帶有預覽和信息部分，然后，我們必須為我們的預覽圖像初始化。這就是它的工作原理。裁剪圖像后，我們可以單擊“上傳”按鈕以將結果發送到服務器。
第 4 步. PHP
在這一步中，我們必須接受（并上傳）我們裁剪出來的圖片。下面是一個有用的 PHP 函數：
function?uploadImageFile()?{?//?Note:?GD?library?is?required?for?this?function
????if?($_SERVER['REQUEST_METHOD']?==?'POST')?{
????????$iWidth?=?$iHeight?=?200;?//?desired?image?result?dimensions
????????$iJpgQuality?=?90;
????????if?($_FILES)?{
????????????//?if?no?errors?and?size?less?than?250kb
????????????if?(!?$_FILES['image_file']['error']?&&?$_FILES['image_file']['size']?????????????????if?(is_uploaded_file($_FILES['image_file']['tmp_name']))?{
????????????????????//?new?unique?filename
????????????????????$sTempFileName?=?'cache/'?.?md5(time().rand());
????????????????????//?move?uploaded?file?into?cache?folder
????????????????????move_uploaded_file($_FILES['image_file']['tmp_name'],?$sTempFileName);
????????????????????//?change?file?permission?to?644
????????????????????@chmod($sTempFileName,?0644);
????????????????????if?(file_exists($sTempFileName)?&&?filesize($sTempFileName)?>?0)?{
????????????????????????$aSize?=?getimagesize($sTempFileName);?//?try?to?obtain?image?info
????????????????????????if?(!$aSize)?{
????????????????????????????@unlink($sTempFileName);
????????????????????????????return;
????????????????????????}
????????????????????????//?check?for?image?type
????????????????????????switch($aSize[2])?{
????????????????????????????case?IMAGETYPE_JPEG:
????????????????????????????????$sExt?=?'.jpg';
????????????????????????????????//?create?a?new?image?from?file
????????????????????????????????$vImg?=?@imagecreatefromjpeg($sTempFileName);
????????????????????????????????break;
????????????????????????????case?IMAGETYPE_PNG:
????????????????????????????????$sExt?=?'.png';
????????????????????????????????//?create?a?new?image?from?file
????????????????????????????????$vImg?=?@imagecreatefrompng($sTempFileName);
????????????????????????????????break;
????????????????????????????default:
????????????????????????????????@unlink($sTempFileName);
????????????????????????????????return;
????????????????????????}
????????????????????????//?create?a?new?true?color?image
????????????????????????$vDstImg?=?@imagecreatetruecolor(?$iWidth,?$iHeight?);
????????????????????????//?copy?and?resize?part?of?an?image?with?resampling
????????????????????????imagecopyresampled($vDstImg,?$vImg,?0,?0,?(int)$_POST['x1'],?(int)$_POST['y1'],?$iWidth,?$iHeight,?(int)$_POST['w'],?(int)$_POST['h']);
????????????????????????//?define?a?result?image?filename
????????????????????????$sResultFileName?=?$sTempFileName?.?$sExt;
????????????????????????//?output?image?to?file
????????????????????????imagejpeg($vDstImg,?$sResultFileName,?$iJpgQuality);
????????????????????????@unlink($sTempFileName);
????????????????????????return?$sResultFileName;
????????????????????}
????????????????}
????????????}
????????}
????}
}
$sImage?=?uploadImageFile();
echo?'';
我們也必須在服務器端檢查圖像大小和格式，結果，我們將獲得雙重保護（在用戶端和服務器端）免受不需要的文件被上傳。一旦我們上傳了圖像（使用 ），我們可以裁剪它（使用 GD 的函數：、 和 ），并且——使用“”函數將結果轉換為圖像文件。請注意小程序圖片裁剪上傳，在結果中我們會得到一個小圖像（只有 200×200）小程序圖片裁剪上傳，因此，除了裁剪之外，我們還調整了圖像的大小。我為所有傳入的照片選擇了一個所需的尺寸：200×200（這是一個很好的格式，例如..個人資料的頭像）。最后，我們可以在屏幕上顯示這個圖像。
您可能對以下文章也感興趣
