منتديات المجاوشي - [ درس ] رفع الصورة html5 مع طقع جزاء منها

السلام عليكم

على طول مثال

http://www.traidnt.net/vb/attachment...78670173-1.jpg

http://www.traidnt.net/vb/attachment...78670173-2.jpg

راح نستخدم أحد بلاقات جكويري و جكويري و HTML5 و PHP

هذه أحد دروس على النت , طبقتها وقلت أشاركم فيها

جميع ملفات في المرفق حملها وجربها على سيرفر شخصي

أول شي نضيف ملفات المساعدة

رمز PHP:

الان عناصر HTML

رمز PHP:

الخطوة 1: الرجاء اختيار صورة للرفع

الخطوة 2: الرجاء أختيار منطقة للقطع

الحجم
الصيغة
أبعاد الصورة
W
H

الان الجافا سكربت

رمز PHP:

// تحويل الحجم الى صيغة مقروائه
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;
};

// تحديث الابعاد الجديده (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);
}

الان ملف PHP

رمز PHP:

حمل الملفات من المرفق وجربها على سيرفر شخصي وعدلها على كيفك

الصور المصغرة المرفقة http://www.traidnt.net/vb/attachment...8670167t-1.jpg http://www.traidnt.net/vb/attachment...8670172t-2.jpg
الملفات المرفقة http://www.traidnt.net/vb/images/attach/zip.gif 1.zip (45.0 كيلوبايت)

أكثر...