romaissa
11-01-2013, بتوقيت غرينيتش 04:48 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط±ظپط¹ ط§ظ„طµظˆط±ط© HTML5 ظ…ط¹ ظ‚ط·ط¹ ط¬ط²ط، ظ…ظ†ظ‡ط§ (http://www.dzbatna.com/t2326127/)
السلام عليكم
على طول مثال
http://www.dzbatna.com/attachments/708556d1378670173-1.jpg
http://www.dzbatna.com/attachments/708557d1378670173-2.jpg
راح نستخدم أحد بلاقات جكويري و جكويري و HTML5 و PHP
هذه أحد دروس على النت , طبقتها وقلت أشاركم فيها
جميع ملفات في المرفق حملها وجربها على سيرفر SERVER شخصي
أول شي نضيف ملفات المساعدة
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- أضافة ملفات الاستايل style -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<!-- أضافة ملفات الجافا سكربت -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/script.js"></script>
</code> </code>
الان عناصر HTML
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="bbody">
<!-- عنصر الرفع -->
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()">
<!-- أخفاء هذه الملومات -->
<input type="hidden" id="x1" name="x1" />
<input type="hidden" id="y1" name="y1" />
<input type="hidden" id="x2" name="x2" />
<input type="hidden" id="y2" name="y2" />
<h2>الخطوة 1: الرجاء اختيار صورة للرفع</h2>
<div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div>
<div class="error"></div>
<div class="step2">
<h2>الخطوة 2: الرجاء أختيار منطقة للقطع</h2>
<img id="preview" />
<div class="info">
<label>الحجم</label> <input type="text" id="filesize" name="filesize" />
<label>الصيغة</label> <input type="text" id="filetype" name="filetype" />
<label>أبعاد الصورة</label> <input type="text" id="filedim" name="filedim" />
<label>W</label> <input type="text" id="w" name="w" />
<label>H</label> <input type="text" id="h" name="h" />
</div>
<input type="submit" value="تحميل" />
</div>
</form>
</div>
</code> </code>
الان الجافا سكربت
رمز PHP:
<code style="white-space:nowrap"> <code>
// تحويل الحجم الى صيغة مقروائه
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];
};
// فحص منطقة القطع
function checkForm() {
if (parseInt($('#w').val())) return true;
$('.error').html(' الرجاء أختيار منطقة للقطع بعدها تستطيع الرفع').show();
return false;
};
// تحديث update الابعاد الجديده (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);
};
// حذف الابعاد بعد الانتهاء (onRelease event handler)
function clearInfo() {
$('.info #w').val('');
$('.info #h').val('');
};
function fileSelectHandler() {
// جلب الملف المختار
var oFile = $('#image_file')[0].files[0];
// أخفاء الاخطاء
$('.error').hide();
// فحص صيغة الصورة (jpg and png are allowed)
var rFilter = /^(image\/jpeg|image\/png)$/i;
if (! rFilter.test(oFile.type)) {
$('.error').html('الامتداد المسموح به فقط (jpg and png)').show();
return;
}
// فحص حجم الصورة
if (oFile.size > 250 * 1024) {
$('.error').html('الصورة المختارة كبير , الرجاء أختيار صورة أصغر').show();
return;
}
// عرض الصورة
var oImage = document.getElementById('preview');
// هذه HTML5 FileReader
var oReader = new FileReader();
oReader.onload = function(e) {
// e.target.result يحتوي على عنوان الصورة
oImage.src = e.target.result;
oImage.onload = function () {
// عرض الخطواة 2
$('.step2').fadeIn(500);
// عرض معلومات بسيطة عن الصورة
var sResultFileSize = bytesToSize(oFile.size);
$('#filesize').val(sResultFileSize);
$('#filetype').val(oFile.type);
$('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
// عمل متغير يحفظ القيم
var jcrop_api, boundx, boundy;
// حذفه اذا كان موجود
if (typeof jcrop_api != 'undefined')
jcrop_api.destroy();
// تشغيل Jcrop
$('#preview').Jcrop({
minSize: [32, 32], // حجم مربع القطع
aspectRatio : 1, // تحكم ratio 1:1
bgFade: true, // أستخدم التأثيرات
bgOpacity: .3, // الشفافية
onChange: updateInfo,
onSelect: updateInfo,
onRelease: clearInfo
}, function(){
// نجلب حجم الصورة الحقيقي
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// حفظ في متغير
jcrop_api = this;
});
};
};
// قرائة الملف كا DataURL
oReader.readAsDataURL(oFile);
}
</code> </code>
الان ملف PHP
رمز PHP:
<code style="white-space:nowrap"> <code> <?php
## أخفاء الاخطاء
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
function uploadImageFile() { // ملاحضة تحتاج مكتبت GD
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$iWidth = $iHeight = 200; // تحكم أبعاد الصورة
$iJpgQuality = 90;
if ($_FILES) {
// اذا كان لا يوجد أخطاء وحجم الصورة أقل من 250 كيلوبايت
if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 250 * 1024) {
if (is_uploaded_file($_FILES['image_file']['tmp_name' ])) {
// عمل أسم لا يتكرار
$sTempFileName = 'upload/' . md5(time().rand());
// نقل الصورة الى ملف الحفظ
move_uploaded_file($_FILES['image_file']['tmp_name '], $sTempFileName);
// تغير صلاحيات الملف 644
@chmod($sTempFileName, 0644);
if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) {
$aSize = getimagesize($sTempFileName); // جلب معلوماتعن الصورة
if (!$aSize) {
@unlink($sTempFileName);
return;
}
// فحص صيغت الصورة
switch($aSize[2]) {
case IMAGETYPE_JPEG:
$sExt = '.jpg';
// عمل صورة جديده
$vImg = @imagecreatefromjpeg($sTempFileName);
break;
case IMAGETYPE_PNG:
$sExt = '.png';
// عمل صورة جديده
$vImg = @imagecreatefrompng($sTempFileName);
break;
default:
@unlink($sTempFileName);
return;
}
// عمل الاللون
$vDstImg = @imagecreatetruecolor( $iWidth, $iHeight );
// نسخة جزاء من الصورة مع التصغير
imagecopyresampled($vDstImg, $vImg, 0, 0, (int)$_POST['x1'], (int)$_POST['y1'], $iWidth, $iHeight, (int)$_POST['w'], (int)$_POST['h']);
// عمل الاسم الصورة
$sResultFileName = $sTempFileName . $sExt;
// أستخراج الصورة
imagejpeg($vDstImg, $sResultFileName, $iJpgQuality);
@unlink($sTempFileName);
return $sResultFileName;
}
}
}
}
}
}
// هذه الفنكشن يعطينا الرابط الموقع
function CurrentPageURL()
{
$pageURL = $_SERVER['HTTPS'] == 'on' ? 'https://' : 'http://';
$pageURL .= $_SERVER['SERVER_PORT'] != '80' ? $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"] : $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
return $pageURL;
}
// تشغيل الفنكشن
$sImage = uploadImageFile();
// طبع الصورة
echo '<img src="'.$sImage.'" />';
echo "<hr />";
// طبع رابط الصورة
echo '<input type="text" size="70" value="http://'.$_SERVER['SERVER_NAME'].'/1/'.$sImage.'">';?> </code> </code>
حمل الملفات من المرفق وجربها على سيرفر SERVER شخصي وعدلها على كيفك
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif 1.zip (http://www.traidnt.net/vb/attachments/708558d1378670493-1.zip) (45.0 كيلوبايت, عدد مرات المشاهدة 47 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم
على طول مثال
http://www.dzbatna.com/attachments/708556d1378670173-1.jpg
http://www.dzbatna.com/attachments/708557d1378670173-2.jpg
راح نستخدم أحد بلاقات جكويري و جكويري و HTML5 و PHP
هذه أحد دروس على النت , طبقتها وقلت أشاركم فيها
جميع ملفات في المرفق حملها وجربها على سيرفر SERVER شخصي
أول شي نضيف ملفات المساعدة
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- أضافة ملفات الاستايل style -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<!-- أضافة ملفات الجافا سكربت -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/script.js"></script>
</code> </code>
الان عناصر HTML
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="bbody">
<!-- عنصر الرفع -->
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()">
<!-- أخفاء هذه الملومات -->
<input type="hidden" id="x1" name="x1" />
<input type="hidden" id="y1" name="y1" />
<input type="hidden" id="x2" name="x2" />
<input type="hidden" id="y2" name="y2" />
<h2>الخطوة 1: الرجاء اختيار صورة للرفع</h2>
<div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div>
<div class="error"></div>
<div class="step2">
<h2>الخطوة 2: الرجاء أختيار منطقة للقطع</h2>
<img id="preview" />
<div class="info">
<label>الحجم</label> <input type="text" id="filesize" name="filesize" />
<label>الصيغة</label> <input type="text" id="filetype" name="filetype" />
<label>أبعاد الصورة</label> <input type="text" id="filedim" name="filedim" />
<label>W</label> <input type="text" id="w" name="w" />
<label>H</label> <input type="text" id="h" name="h" />
</div>
<input type="submit" value="تحميل" />
</div>
</form>
</div>
</code> </code>
الان الجافا سكربت
رمز PHP:
<code style="white-space:nowrap"> <code>
// تحويل الحجم الى صيغة مقروائه
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];
};
// فحص منطقة القطع
function checkForm() {
if (parseInt($('#w').val())) return true;
$('.error').html(' الرجاء أختيار منطقة للقطع بعدها تستطيع الرفع').show();
return false;
};
// تحديث update الابعاد الجديده (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);
};
// حذف الابعاد بعد الانتهاء (onRelease event handler)
function clearInfo() {
$('.info #w').val('');
$('.info #h').val('');
};
function fileSelectHandler() {
// جلب الملف المختار
var oFile = $('#image_file')[0].files[0];
// أخفاء الاخطاء
$('.error').hide();
// فحص صيغة الصورة (jpg and png are allowed)
var rFilter = /^(image\/jpeg|image\/png)$/i;
if (! rFilter.test(oFile.type)) {
$('.error').html('الامتداد المسموح به فقط (jpg and png)').show();
return;
}
// فحص حجم الصورة
if (oFile.size > 250 * 1024) {
$('.error').html('الصورة المختارة كبير , الرجاء أختيار صورة أصغر').show();
return;
}
// عرض الصورة
var oImage = document.getElementById('preview');
// هذه HTML5 FileReader
var oReader = new FileReader();
oReader.onload = function(e) {
// e.target.result يحتوي على عنوان الصورة
oImage.src = e.target.result;
oImage.onload = function () {
// عرض الخطواة 2
$('.step2').fadeIn(500);
// عرض معلومات بسيطة عن الصورة
var sResultFileSize = bytesToSize(oFile.size);
$('#filesize').val(sResultFileSize);
$('#filetype').val(oFile.type);
$('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
// عمل متغير يحفظ القيم
var jcrop_api, boundx, boundy;
// حذفه اذا كان موجود
if (typeof jcrop_api != 'undefined')
jcrop_api.destroy();
// تشغيل Jcrop
$('#preview').Jcrop({
minSize: [32, 32], // حجم مربع القطع
aspectRatio : 1, // تحكم ratio 1:1
bgFade: true, // أستخدم التأثيرات
bgOpacity: .3, // الشفافية
onChange: updateInfo,
onSelect: updateInfo,
onRelease: clearInfo
}, function(){
// نجلب حجم الصورة الحقيقي
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// حفظ في متغير
jcrop_api = this;
});
};
};
// قرائة الملف كا DataURL
oReader.readAsDataURL(oFile);
}
</code> </code>
الان ملف PHP
رمز PHP:
<code style="white-space:nowrap"> <code> <?php
## أخفاء الاخطاء
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
function uploadImageFile() { // ملاحضة تحتاج مكتبت GD
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$iWidth = $iHeight = 200; // تحكم أبعاد الصورة
$iJpgQuality = 90;
if ($_FILES) {
// اذا كان لا يوجد أخطاء وحجم الصورة أقل من 250 كيلوبايت
if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 250 * 1024) {
if (is_uploaded_file($_FILES['image_file']['tmp_name' ])) {
// عمل أسم لا يتكرار
$sTempFileName = 'upload/' . md5(time().rand());
// نقل الصورة الى ملف الحفظ
move_uploaded_file($_FILES['image_file']['tmp_name '], $sTempFileName);
// تغير صلاحيات الملف 644
@chmod($sTempFileName, 0644);
if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) {
$aSize = getimagesize($sTempFileName); // جلب معلوماتعن الصورة
if (!$aSize) {
@unlink($sTempFileName);
return;
}
// فحص صيغت الصورة
switch($aSize[2]) {
case IMAGETYPE_JPEG:
$sExt = '.jpg';
// عمل صورة جديده
$vImg = @imagecreatefromjpeg($sTempFileName);
break;
case IMAGETYPE_PNG:
$sExt = '.png';
// عمل صورة جديده
$vImg = @imagecreatefrompng($sTempFileName);
break;
default:
@unlink($sTempFileName);
return;
}
// عمل الاللون
$vDstImg = @imagecreatetruecolor( $iWidth, $iHeight );
// نسخة جزاء من الصورة مع التصغير
imagecopyresampled($vDstImg, $vImg, 0, 0, (int)$_POST['x1'], (int)$_POST['y1'], $iWidth, $iHeight, (int)$_POST['w'], (int)$_POST['h']);
// عمل الاسم الصورة
$sResultFileName = $sTempFileName . $sExt;
// أستخراج الصورة
imagejpeg($vDstImg, $sResultFileName, $iJpgQuality);
@unlink($sTempFileName);
return $sResultFileName;
}
}
}
}
}
}
// هذه الفنكشن يعطينا الرابط الموقع
function CurrentPageURL()
{
$pageURL = $_SERVER['HTTPS'] == 'on' ? 'https://' : 'http://';
$pageURL .= $_SERVER['SERVER_PORT'] != '80' ? $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"] : $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
return $pageURL;
}
// تشغيل الفنكشن
$sImage = uploadImageFile();
// طبع الصورة
echo '<img src="'.$sImage.'" />';
echo "<hr />";
// طبع رابط الصورة
echo '<input type="text" size="70" value="http://'.$_SERVER['SERVER_NAME'].'/1/'.$sImage.'">';?> </code> </code>
حمل الملفات من المرفق وجربها على سيرفر SERVER شخصي وعدلها على كيفك
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif 1.zip (http://www.traidnt.net/vb/attachments/708558d1378670493-1.zip) (45.0 كيلوبايت, عدد مرات المشاهدة 47 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
