السلام عليكم
على طول مثال
راح نستخدم أحد بلاقات جكويري و جكويري و 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:
حمل الملفات من المرفق وجربها على سيرفر شخصي وعدلها على كيفك
الصور المصغرة المرفقة
الملفات المرفقة
1.zip (45.0 كيلوبايت)
أكثر...