تطوير أداة لقطة شاشة الويب jcrop (مكون إضافي)

انسخ رمز الكود كما يلي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » البرامج التعليمية » Hello World</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<نوع البرنامج النصي = "نص/جافا سكريبت">

مسج(وظيفة($){

// ما مدى سهولة هذا؟؟
$('#target').Jcrop();

});

</script>
</الرأس>

<الجسم>
<div معرف = "الخارجي">
<ديف>
<ديف>

<h1>Jcrop - أهلاً بالعالم</h1>
<img src="demo_files/pool.jpg" id="target" />

<ص>
<b>يوضح هذا المثال السلوك الافتراضي لـ Jcrop.</b>
نظرًا لعدم إرفاق أي معالجات للحدث، فإنه يتم تنفيذه فقط
السلوك المحصولي.
</ص>

<div معرف = "dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">صفحة Jcrop الرئيسية</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">دليل (محرّر المستندات)</a>
</div>

</div>
</div>
</div>
</الجسم>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial2.html

انسخ رمز الكود كما يلي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » البرامج التعليمية » معالج الأحداث</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<نوع البرنامج النصي = "نص/جافا سكريبت">
مسج(وظيفة($){
$('#الهدف').Jcrop({
onChange: showCoords،
onSelect: showCoords،
onRelease: ClearCoords
});
});
// معالج حدث بسيط، يتم استدعاؤه من onChange وonSelect
// معالجات الأحداث، وفقًا لاستدعاء Jcrop أعلاه
دالة showCoords (ج)
{
$('#x1').val(cx);
$('#y1').val(cy);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(cw);
$('#h').val(ch);
};
وظيفة ClearCoords ()
{
$('#coords input').val('');
};
</script>
</الرأس>
<الجسم>
<div معرف = "الخارجي">
<ديف>
<ديف>
<h1>Jcrop - معالجات الأحداث</h1>

<img src="demo_files/pool.jpg" id="target" />

<معرف النموذج = "الإحداثيات"
فئة = "الإحداثيات"
onsubmit = "إرجاع خطأ؛"
الإجراء = "http://example.com/post.php">
<ديف>
<label>X1 <input type = "text" size = "4" id = "x1" name = "x1" /></label>
<label>Y1 <input type = "text" size = "4" id = "y1" name = "y1" /></label>
<label>X2 <input type = "text" size = "4" id = "x2" name = "x2" /></label>
<label>Y2 <input type = "text" size = "4" id = "y2" name = "y2" /></label>
<label>W <input type = "text" size = "4" id = "w" name = "w" /></label>
<label>H <input type = "text" size = "4" id = "h" name = "h" /></label>
</div>
</النموذج>
<ص>
<b>مثال على معالج الأحداث الأساسي.</b> هنا قمنا بالربط
عدة قيم للنماذج مع استدعاء بسيط لمعالج الأحداث.
والنتيجة هي أن قيم النموذج يتم تحديثها في الوقت الفعلي
يتم تغيير التحديد باستخدام معالج <em>onChange</em> الخاص بـ Jcrop.
</ص>
<ص>
هذه هي مدى سهولة دمج Jcrop في نموذج الويب التقليدي!
</ص>
<div معرف = "dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">صفحة Jcrop الرئيسية</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">دليل (محرّر المستندات)</a>
</div>
</div>
</div>
</div>
</الجسم>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial3.html

 انسخ رمز الكود كما يلي:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <الرأس>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 <title>Jcrop » البرامج التعليمية » نسبة العرض إلى الارتفاع مع المعاينة</title>
 <script src="../js/jquery.min.js" type="text/javascript"></script>
 <script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
 <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
 <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
 <نوع البرنامج النصي = "نص/جافا سكريبت">
 مسج(وظيفة($) {
 // قم بإنشاء متغيرات (في هذا النطاق) للاحتفاظ بواجهة برمجة التطبيقات وحجم الصورة
 فار jcrop_api،boundx،boundy؛
 $('#الهدف').Jcrop({
 onChange: التحديث المعاينة،
 عند تحديد: تحديث معاينة،
 نسبة العرض إلى الارتفاع: 1
 }، وظيفة() {
 // استخدم واجهة برمجة التطبيقات للحصول على حجم الصورة الحقيقي
 فار باوندز = this.getBounds();
 boundx = حدود[0];
 الحدود = الحدود[1]؛
 // قم بتخزين واجهة برمجة التطبيقات في متغير jcrop_api
 jcrop_api = this;
 });
 تحديث الوظيفةPreview(ج) {
 إذا (parseInt(cw) > 0) {
 فار آر إكس = 100/سو؛
 فار راي = 100/ch;
 $('#معاينة').css({
 العرض: Math.round(rx *boundx) + 'px'،
 الارتفاع: Math.round(ry * border) + 'px'،
 هامش اليسار: '-' + Math.round(rx * cx) + 'px'،
 هامش الأعلى: '-' + Math.round(ry * cy) + 'px'
 });
 }
 }
 });
 </script>
 </الرأس>
 <الجسم>
 <div معرف = "الخارجي">
 <ديف>
 <ديف>
 <h1>Jcrop - نسبة العرض إلى الارتفاع مع جزء المعاينة</h1>
 <الجدول>
 <تر>
 <TD>
 <ديف>
 <img src="demo_files/pool.jpg" id="target"/>
 </div>
 </TD>
 <TD>
 <ديف>
 <img src="demo_files/pool.jpg" id="preview" />
 </div>
 </TD>
 </tr>
 </الجدول>
 <ص>
 <b>مثال على تنفيذ جزء المعاينة.</b> من الواضح أنه العرض التوضيحي الأكثر وضوحًا، حيث يتم تنفيذ جزء المعاينة بالكامل خارج Jcrop باستخدام رد اتصال بسيط بنكهة jQuery، وقد يكون هذا النوع من الواجهة مفيدًا لإنشاء صورة مصغرة أو صورة رمزية يتم استخدام معالج الأحداث onChange لتحديث العرض في جزء المعاينة.
 </ص>
 <div معرف = "dl_links">
 <a href="http://deepliquid.com/content/Jcrop.html">صفحة Jcrop الرئيسية</a> <a href="http://deepliquid.com/content/Jcrop_Manual.html">دليل (Docs) )</a>
 </div>
 </div>
 </div>
 </div>
 </الجسم>
 </html>

 /Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial4.html

انسخ رمز الكود كما يلي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » البرامج التعليمية » الرسوم المتحركة / التحولات</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="../js/jquery.color.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.extras.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<نوع البرنامج النصي = "نص/جافا سكريبت">
مسج(وظيفة($){
فار jcrop_api;
$('#الهدف').Jcrop({
بي جي فايد: صحيح،
العتامة: .3،
تحديد: [60، 70، 540، 330]
}،وظيفة(){
jcrop_api = this;
});
$('#fadetog').change(function(){
jcrop_api.setOptions({
bgFade: هذا. تم التحقق منه
});
}).attr('checked','checked');
$('#shadetog').change(function(){
إذا (this.checked) $('#shadetxt').slideDown();
else $('#shadetxt').slideUp();
jcrop_api.setOptions({
الظل: هذا.فحص
});
}).attr('checked',false);
// تحديد أقسام الصفحة
أقسام فار = {
anim_buttons: "تحديد الرسوم المتحركة"،
bgo_buttons: "تغيير bgOpacity"،
bgc_buttons: "تغيير bgColor"
};
// تحديد أزرار الرسوم المتحركة
فار أس = {
anim1: [217,122,382,284]،
الرسوم المتحركة2: [20،20،580،380]،
أنيم3: [24،24،176،376]،
أنيم 4: [347,165,550,355]،
أنيم5: [136,55,472,183]
};
// تحديد أزرار bgOpacity
فار بجو = {
منخفض: .2،
منتصف: .5،
عالية: .8،
كامل: 1
};
// تحديد أزرار bgColor
فار بي جي سي = {
الأحمر: '#900'،
الأزرق: '#4BB6F0'،
الأصفر: '#F0B207'،
الأخضر: '#46B81C'،
الأبيض: "الأبيض"،
أسود: "أسود"
};
// إنشاء أهداف مجموعة الحقول للأزرار
ل(أنا في الأقسام)
InsertSection(i,sections[i]);
// إنشاء أزرار الرسوم المتحركة
ل(أنا في التيار المتردد) {
$('#anim_buttons').append(
$('<button />').append(i).click(animHandler(ac[i]))), ' '
);
}
// إنشاء أزرار bgOpacity
ل(أنا في بغو) {
$('#bgo_buttons').append(
$('<button />').append(i).click(setoptHandler('bgOpacity',bgo[i]))), ' '
);
}
// إنشاء أزرار bgColor
ل(أنا في بي جي سي) {
$('#bgc_buttons').append(
$('<زر />').append(i).css({
لون الخلفية: bgc[i]،
اللون: ((i == 'أسود') || (i == 'أحمر'))؟'أبيض':'أسود'
}).click(setoptHandler('bgColor',bgc[i]))), ' '
);
}
// وظيفة لإدراج الأقسام المسماة في الواجهة
وظيفة إدراج القسم (ك، الخامس) {
$('#واجهة').إلحاق(
$('<fieldset></fieldset>').attr('id',k).append(
$('<أسطورة></أسطورة>').append(v)
)
);
};
// معالج لأزرار تحديد الخيارات
وظيفة سيتوبتهاندلر (ك، الخامس) {
وظيفة العودة () {
فار اختيار = { };
opt[k] = v;
jcrop_api.setOptions(opt);
عودة كاذبة.
};
};
// معالج لأزرار الرسوم المتحركة
وظيفة animHandler(v) {
وظيفة العودة () {
jcrop_api.animateTo(v);
عودة كاذبة.
};
};
$('#anim_buttons').append(
$('<button></button>').append('وداعا!').click(function(){
jcrop_api.animateTo(
[300،200،300،200]،
وظيفة () {هذا. الإصدار () }
);
عودة كاذبة.
})
);
$('#interface').show();
});
</script>
</الرأس>
<الجسم>
<div معرف = "الخارجي">
<ديف>
<ديف>
<h1>Jcrop - الرسوم المتحركة/الانتقالات</h1>
<img src="demo_files/sago.jpg" id="target" />
<div id="interface" style="margin: 1em 0;"></div>
<div><label><input type="checkbox" id="fadetog" /> تمكين التلاشي (bgFade: صحيح)</label></div>
<div><label><input type="checkbox" id="shadetog" /> استخدم التظليل التجريبي (الظل: صحيح)</label></div>
<p id="shadetxt" style="display:none; اللون:#900;">
<b>التظليل التجريبي نشط.</b>
يشتمل Jcrop الآن على وضع تظليل يسهل عملية البناء
مثيلات Jcrop الشفافة أفضل، والتظليل التجريبي أقل
أقوى من طريقة التظليل الافتراضية لـ Jcrop ويجب أن تكون كذلك
تستخدم إذا كنت تحتاج إلى هذه الوظيفة.
</ص>
<ص>
<b>الرسوم المتحركة/الانتقالات.</b>
عرض توضيحي لأسلوب animateTo API والانتقالات لـ bgColor
وخيارات bgOpacity تتطلب تضمين خيار John Resig
jQuery <a href="http://plugins.jquery.com/project/color">اللون
الرسوم المتحركة</a> البرنامج المساعد إذا لم يتم تضمينه، فلن تتلاشى الألوان.
</ص>
<div معرف = "dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">صفحة Jcrop الرئيسية</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">دليل (محرّر المستندات)</a>
</div>
</div>
</div>
</div>
</الجسم>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial5.html

انسخ رمز الكود كما يلي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » البرامج التعليمية » API التجريبي</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<نمط النوع = "نص/CSS">
.optdual { الموقف: نسبي }
.optdual .offset { الموضع: اليسار المطلق: 18em }
تسمية .optlist { العرض: 16em؛
#dl_links { الهامش العلوي: .5em }
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
مسج(وظيفة($){
// سيحمل المتغير jcrop_api مرجعًا إلى ملف
// Jcrop API بمجرد إنشاء مثيل Jcrop.
فار jcrop_api;
// في هذا المثال، نظرًا لأن Jcrop قد يكون متصلاً أو منفصلاً
// بناءً على رغبة المستخدم، قمت بتحويل المكالمة إلى دالة
initJcrop();
// الوظيفة بسيطة جدًا
الدالة initJcrop()//{{{
{
// إخفاء أي عناصر واجهة تتطلب Jcrop
// (هذا خاص بجزء واجهة المستخدم المحلية.)
$('.requiresjcrop').hide();
// استدعاء Jcrop بطريقة نموذجية
$('#الهدف').Jcrop({
onRelease: ReleaseCheck
}،وظيفة(){
jcrop_api = this;
jcrop_api.animateTo([100,100,400,300]);
// إعداد الواجهة وإظهارها لـ "ممكّن"
$('#can_click,#can_move,#can_size').attr('checked','checked');
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
$('.requiresjcrop').show();
});
};
//}}}
// استخدم واجهة برمجة التطبيقات للعثور على أبعاد الاقتصاص
// ثم قم بإنشاء اختيار عشوائي
// يتم استخدام هذه الوظيفة عن طريق أزرار setSelect وanimateTo
// بشكل أساسي لأغراض العرض التوضيحي
وظيفة الحصول على عشوائي () {
var dim = jcrop_api.getBounds();
يعود [
Math.round(Math.random() * dim[0])،
Math.round(Math.random() * dim[1])،
Math.round(Math.random() * dim[0])،
Math.round(Math.random() * خافت[1])
];
};
// ترتبط هذه الوظيفة بمعالج onRelease...
// في ظروف معينة (مثل إذا قمت بتعيين minSize
// ونسبة العرض معًا)، قد تخسر عن غير قصد
// التحديد. يعيد رد الاتصال هذا تمكين إنشاء التحديدات
// في مثل هذه الحالة على الرغم من أن الحاجة إلى القيام بذلك تعتمد على أ
// سلوك عربات التي تجرها الدواب، فمن المستحسن أن تقوم بطريقة ما بفخ
// رد الاتصال onRelease إذا كنت تستخدمallowSelect: false
وظيفة الافراج عن الاختيار ()
{
jcrop_api.setOptions({allowSelect: true });
$('#can_click').attr('checked',false);
};
//إرفاق أزرار الواجهة
// قد يبدو أن هذا يحتوي على قدر كبير من التعليمات البرمجية ولكنه أشياء بسيطة
$('#setSelect').انقر(وظيفة(e) {
// تعيين اختيار عشوائي
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// تحريك إلى اختيار عشوائي
jcrop_api.animateTo(getRandom());
});
$('#release').انقر(وظيفة(ه) {
// طريقة الإصدار تمسح التحديد
jcrop_api.release();
});
$('#تعطيل').انقر(وظيفة(ه) {
// تعطيل مثيل Jcrop
jcrop_api.disable();
// قم بتحديث الواجهة لتعكس حالة التعطيل
$('#تمكين').show();
$('.requiresjcrop').hide();
});
$('#تمكين').انقر(وظيفة(ه) {
// إعادة تمكين مثيل Jcrop
jcrop_api.enable();
// قم بتحديث الواجهة لتعكس الحالة الممكّنة
$('#تمكين').hide();
$('.requiresjcrop').show();
});
$('#rehook').انقر(وظيفة(ه) {
// يكون هذا الزر مرئيًا عند تدمير Jcrop
// يقوم بإعادة المرفقات وتحديث واجهة المستخدم
$('#rehook,#enable').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
عودة كاذبة.
});
$('#unhook').انقر(وظيفة(e) {
// تدمير عنصر واجهة المستخدم Jcrop، واستعادة الحالة الأصلية
jcrop_api.destroy();
// قم بتحديث الواجهة لتعكس الحالة غير المرفقة
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
عودة كاذبة.
});
// قم بتوصيل أزرار تبديل الصور الثلاثة
$('#img1').انقر(وظيفة(ه) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
عودة كاذبة.
});
$('#img2').انقر(وظيفة(ه) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
عودة كاذبة.
});
$('#img3').انقر(وظيفة(ه) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
هذه.setOptions({
التعتيم: 1،
الصورة الخارجية: 'demo_files/sagomod.jpg'
});
this.animateTo(getRandom());
});
عودة كاذبة.
});
// تقوم مربعات الاختيار ببساطة بتعيين الخيارات بناءً على القيمة المحددة لها
// يتم تغيير الخيارات عن طريق تمرير كائن خيارات جديد
// أيضًا، لمنع السلوك الغريب، يتم فحصهم في البداية
// يطابق هذا الحالة الأولية الافتراضية لـ Jcrop
$('#can_click').change(function(e) {
jcrop_api.setOptions({allowSelect: !!this.checked });
jcrop_api.focus();
});
$('#can_move').change(function(e) {
jcrop_api.setOptions({allowMove: !!this.checked });
jcrop_api.focus();
});
$('#can_size').change(function(e) {
jcrop_api.setOptions({allowResize: !!this.checked });
jcrop_api.focus();
});
$('#ar_lock').change(function(e) {
jcrop_api.setOptions(this.checked?
{ نسبة العرض إلى الارتفاع: 4/3 }: { نسبة العرض إلى الارتفاع: 0 });
jcrop_api.focus();
});
$('#size_lock').change(function(e) {
jcrop_api.setOptions(this.checked? {
الحد الأدنى للحجم: [80، 80]،
الحجم الأقصى: [350، 350]
}: {
الحد الأدنى للحجم: [0، 0]،
الحد الأقصى للحجم: [0، 0]
});
jcrop_api.focus();
});
});
</script>
</الرأس>
<الجسم>
<div معرف = "الخارجي">
<ديف>
<ديف>
<h1>Jcrop - العرض التوضيحي لواجهة برمجة التطبيقات</h1>
<img src="demo_files/sago.jpg" id="target" />
<div style="margin: .8em 0 .5em;">
<سبان>
<button id="setSelect">setSelect</button>
<button id="animateTo">animateTo</button>
<button id="release">الإصدار</button>
<button id="disable">تعطيل</button>
</span>
<button id="enable" style="display:none;">إعادة التمكين</button>
<button id="unhook">تدمير!</button>
<button id="rehook" style="display:none;">إرفاق Jcrop</button>
</div>
<مجموعة الحقول>
<legend>تبديل الخيارات</legend>
<ديف>
<label><input type="checkbox" id="ar_lock" />نسبة العرض إلى الارتفاع</label>
<label><input type="checkbox" id="size_lock" />إعداد الحد الأدنى للحجم/الحد الأقصى للحجم</label>
</div>
<ديف>
<label><input type="checkbox" id="can_click" />السماح بالتحديدات الجديدة</label>
<label><input type="checkbox" id="can_move" />يمكن نقل التحديد</label>
<label><input type="checkbox" id="can_size" />تحديد يمكن تغيير حجمه</label>
</div>
</فيلدسيت>
<fieldset style="margin: .5em 0;">
<legend>تغيير الصورة</legend>
<سبان>
<button id="img2">تجمع</button>
<button id="img1">ساغو</button>
<button id="img3">ساغو مع الصورة الخارجية</button>
</span>
</فيلدسيت>
<div معرف = "dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">صفحة Jcrop الرئيسية</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">دليل (محرّر المستندات)</a>
</div>
</div>
</div>
</div>
</الجسم>
</html>