تعليق: في الماضي ، إذا كنت ترغب في عرض صور رمادية على الويب ، يمكنك فقط استخدام برنامج الصور لتحويلها. ولكن الآن يمكن تحقيق هذه العملية بمساعدة قماش HTML5 ، دون الحاجة إلى استخدام برنامج تحرير الصور
في الماضي ، إذا كنت ترغب في عرض صور رمادية على الويب ، يمكنك فقط استخدام برنامج الصور يدويًا لتحويلها. ولكن الآن يمكن تحقيق هذه العملية بمساعدة قماش HTML5 ، دون الحاجة إلى استخدام برنامج تحرير الصور. لقد استخدمت HTML5 و jQuery لإظهار العرض التوضيحي لإظهار كيفية تنفيذ هذه الوظيفة.غاية
سيوضح لك هذا العرض التوضيحي كيفية التبديل بين الصورة الرمادية والصورة الأصلية عند تحريك الماوس على الصورة باستخدام HTML5 و JQuery. قبل ظهور HTML5 ، لتنفيذ هذه الوظيفة ، يجب إعداد صورتين ، صورة رمادية واحدة وصورة واحدة أصلية. ولكن يمكن تحقيقه الآن بشكل أسرع وأسهل مع HTML5 ، لأن الصور الرمادية يتم إنشاؤها مباشرة على الصورة الأصلية. آمل أن يكون رمز JS هذا مفيدًا عند إنشاء وظائف عرض ملف أو صورة.
رسم تخطيطي للتكاثر
رمز jQuery
سيبحث رمز jQuery التالي عن الصورة المستهدفة وإنشاء إصدار رمادي. عندما تنقل الماوس إلى الصورة ، ستتحول الصورة الرمادية إلى اللون الأساسي.
<script src = "jquery.min.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
// قم بتعيين حدث تحميل النافذة للانتظار حتى يتم تحميل جميع الصور قبل التشغيل
$ (window) .load (function () {
// قم بإدخال الصورة تدريجياً حتى لا يتم عرض الصورة الأصلية باللون ، ثم تنفيذ حدث تحميل النافذة
$ (". البند IMG"). Fadein (500) ؛
// انسخ الصورة
$ ('. البند IMG'). كل (function () {
var el = $ (هذا) ؛
el.css ({"position": "aboSive"}). wrap ("<viv>"). clone (). addClass ('img_grayscale').
var el = $ (هذا) ؛
el.parent ().
el.dequeue () ؛
}) ؛
this.src = grayscale (this.src) ؛
}) ؛
// اجعل الصورة تدخل تدريجياً
$ ('. البند img'). mouseover (function () {
$ (this) .parent (). find ('img: first'). stop ().
})
$ ('. img_grayscale'). mouseout (function () {
$ (this) .stop (). ANIMATE ({عظمة: 0} ، 1000) ؛
}) ؛
}) ؛
// اصنع صور رمادية مع قماش
دالة رمادي (SRC) {
var canvas = document.createElement ('canvas') ؛
var ctx = canvas.getContext ('2d') ؛
var imgobj = new image () ؛
imgobj.src = src ؛
canvas.width = imgobj.width ؛
canvas.height = imgobj.height ؛
ctx.drawImage (imgobj ، 0 ، 0) ؛
var imgpixels = ctx.getimagedata (0 ، 0 ، canvas.width ، canvas.height) ؛
لـ (var y = 0 ؛ y <imgpixels.height ؛ y ++) {
لـ (var x = 0 ؛ x <imgpixels.width ؛ x ++) {
var i = (y * 4) * imgpixels.width + x * 4 ؛
var avg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3 ؛
imgpixels.data [i] = avg ؛
imgpixels.data [i + 1] = avg ؛
imgpixels.data [i + 2] = avg ؛
}
}
ctx.putimagedata (imgpixels ، 0 ، 0 ، 0 ، imgpixels.width ، imgpixels.height) ؛
return canvas.todataurl () ؛
}
</script>
كيفية استخدام
اتبع الخطوات أدناه:
اقتباس jquery.js
انسخ الرمز أعلاه
اضبط الصورة المستهدفة (على سبيل المثال: .post-IMG ، IMG ، .Gallery IMG ، إلخ)
يمكنك أيضًا تعيين سرعة الرسوم المتحركة (أي 1000 = 1 ثانية)
التوافق
جربت جميع المتصفحات التي تدعم HTML5 و Canvas ، مثل: Chrome و Safari و Firefox. إذا كان المتصفح لا يدعم HTML5 ، فسيستخدم فقط الصورة الأصلية ولن يقوم بإنشاء صور رمادية.
ملاحظة: إذا لم يتمكن ملف HTML المحلي من تشغيل Firefox و Chrome ، فأنت بحاجة إلى نشر ملف HTML على الخادم.
الممارسة الذاتية
لقد اختبرته بنفسي وفقًا للبرنامج التعليمي ووجدت بعض الأشياء التي يجب الانتباه إليها. فتحت الصفحة مع Firefox. لا يمكن تشغيل البرنامج بشكل صحيح ، ولكن يمكن تشغيله بعد نشر الكود ذي الصلة على الخادم.
يجب ضمان أن تكون صورة محلية ، وإلا يجب عليك الإبلاغ عن خطأ أمان.
هذا لأنه:
القماش هو عنصر قماش في معيار HTML5 ويمكن استخدامه لرسم الصور ثنائية الأبعاد وثلاثية الأبعاد.
ومع ذلك ، من السهل مواجهة مشاكل الأخطاء الأمنية أثناء تصحيح الأخطاء.
حاليًا ، تظهر الأخطاء الأمنية التي واجهتها أثناء تصحيح الأخطاء بشكل أساسي على Todataurl () و SRC.
يشير خطأ الأمان إلى أن هذا الرمز ليس لديه مشاكل دلالية ، ولكن لا يمكن تشغيله بشكل طبيعي لأسباب أمنية.
وضع خطأ الأمن في رمي:
استخدام الصور عبر المجال في قماش
تصحيح الأخطاء في بيئة محلية بدون خادم
غير قادر على الحصول على العلاقة بين المجال الحالي والصورة
عادة ما تكون بعض الحلول الموجودة على Stackoverflow تتيح لك حل مشاكل النطاق عبر المجال.
ولكن في الواقع ، إذا لم تستخدم برنامج الخادم أثناء تصحيح الأخطاء المحلية ، فسوف يتسبب أيضًا في هذه المشكلة.
على سبيل المثال: يتم استخدام وظيفة Todataurl أثناء تصحيح الأخطاء المحلية ، ويتم استخدام ملف الصورة المحلي في قماش. في Chrome و Firefox ، سيظل خطأ الأمن.
يتمثل الحل الشائع في إعداد بيئة خادم محليًا ، أو إرسال المحتوى إلى الخادم لتصحيح الأخطاء.