التعليق: HTML5 ، سحرية جدا. تم اختبار البرنامج في متصفح Google. يمكن للأصدقاء المهتمين الرجوع إلى الخطوات المحددة لتنفيذ صورة رمادية الصور باستخدام قماش مكون HTML5 الموضح في هذه المقالة. آمل أن يكون ذلك مفيدًا لك.
قم بإنشاء صفحة HTML جديدة وأضفها بين علامات الجسم
<Canvas> مرشح رمادي </canvas>
أضف أبسط نص JavaScript
<pre> window.onload = function () {
var canvas = document.getElementById ("mycanvas") ؛
<span> </span> // todo: افعل شيئًا هنا
}
رمز الحصول على سياق سياق كائن الرسم من كائن القماش هو كما يلي:
var context = canvas.getContext ("2d") ؛
رمز HTML لإضافة صورة إلى صفحة HTML كما يلي
<img src = "hanjiaren.jpg" />
رمز JavaScript للحصول على كائن الصورة من كائن HTML IMG كما يلي:
var image = document.getElementById ("picturesource") ؛
رمز رسم الصورة الناتجة في كائن القماش هو كما يلي:
context.drawImage (صورة ، 0 ، 0) ؛
رمز الحصول على بيانات بكسل الصورة من كائن قماش كما يلي:
var canvasdata = context.getImagedata (0 ، 0 ، canvas.width ، canvas.height) ؛
رمز قراءة قيم البيكسل وتنفيذ حساب الرمادي هو كما يلي:
لـ (var x = 0 ؛ x <canvasdata.width ؛ x ++) {
لـ (var y = 0 ؛ y <canvasdata.height ؛ y ++) {
// فهرس البكسل في المصفوفة
var idx = (x + y * canvasdata.width) * 4 ؛
var r = canvasdata.data [idx + 0] ؛
var g = canvasdata.data [idx + 1] ؛
var b = canvasdata.data [idx + 2] ؛
// حساب قيمة المقياس الرمادي
var gray = .299 * r + .587 * g + .114 * b ؛
// تعيين قيمة النطاق الرمادي
canvasdata.data [idx + 0] = Gray ؛ // القناة الحمراء
canvasdata.data [idx + 1] = Gray ؛ // قناة خضراء
canvasdata.data [idx + 2] = رمادي ؛ // القناة الزرقاء
canvasdata.data [idx + 3] = 255 ؛ // قناة ألفا
// إضافة الحدود السوداء
if (x <8 || y <8 || x> (canvasdata.width - 8) || y> (canvasdata.height - 8)))
{
canvasdata.data [idx + 0] = 0 ؛
canvasdata.data [idx + 1] = 0 ؛
canvasdata.data [idx + 2] = 0 ؛
}
}
}
عندما تكون صيغة الحساب الرمادية هي اللون الرمادي = 0.299 × اللون الأحمر + 0.578 × اللون الأخضر + 0.114 * اللون الأزرق
قيم Pixel القراءة هي RGBA ، والتي تمثل اللون الأحمر ، اللون الأخضر ، اللون الأزرق ، قناة ألفا.
يجب إعادة تحميل البيانات المعالجة إلى قماش. الرمز كما يلي:
context.putimagedata (canvasdata ، 0 ، 0) ؛
التأثير النهائي للبرنامج هو كما يلي:
رمز المصدر الكامل كما يلي:
<html>
<head>
<script>
window.onload = function () {
var canvas = document.getElementById ("mycanvas") ؛
var image = document.getElementById ("picturesource") ؛
// أعد حجم القماش deminsion
canvas.width = image.width ؛
canvas.height = Image.Height ؛
// احصل على كائن عرض 2D
var context = canvas.getContext ("2d") ؛
context.drawImage (صورة ، 0 ، 0) ؛
var canvasdata = context.getImagedata (0 ، 0 ، canvas.width ، canvas.height) ؛
تنبيه (canvasdata.width.toString ()) ؛
تنبيه (canvasdata.height.toString ()) ؛
// مرشح رمادي
لـ (var x = 0 ؛ x <canvasdata.width ؛ x ++) {
لـ (var y = 0 ؛ y <canvasdata.height ؛ y ++) {
// فهرس البكسل في المصفوفة
var idx = (x + y * canvasdata.width) * 4 ؛
var r = canvasdata.data [idx + 0] ؛
var g = canvasdata.data [idx + 1] ؛
var b = canvasdata.data [idx + 2] ؛
// حساب قيمة المقياس الرمادي
var gray = .299 * r + .587 * g + .114 * b ؛
// تعيين قيمة النطاق الرمادي
canvasdata.data [idx + 0] = Gray ؛ // القناة الحمراء
canvasdata.data [idx + 1] = Gray ؛ // قناة خضراء
canvasdata.data [idx + 2] = رمادي ؛ // القناة الزرقاء
canvasdata.data [idx + 3] = 255 ؛ // قناة ألفا
// إضافة الحدود السوداء
if (x <8 || y <8 || x> (canvasdata.width - 8) || y> (canvasdata.height - 8)))
{
canvasdata.data [idx + 0] = 0 ؛
canvasdata.data [idx + 1] = 0 ؛
canvasdata.data [idx + 2] = 0 ؛
}
}
}
context.putimagedata (canvasdata ، 0 ، 0) ؛ // في Coords 0،0
} ؛
</script>
</head>
<body>
<h2> Hello World! </h2>
<img src = "hanjiaren.jpg" />
<Canvas> مرشح رمادي </canvas>
</body>
</html>
يمكن للملفات الموجودة في الكود استبدال أي ملفات صور تريد رؤيتها
HTML5 ، سحرية جدا. تم اختبار البرنامج في متصفح Google.
آخر نصيحة ، لا تحاول تشغيل الكود أعلاه محليًا. سيقوم فحص أمان Google تلقائيًا بمنع القراءة وكتابة الملفات غير المجال من المتصفح.
من الأفضل نشره على Tomcat أو أي خادم حاوية ويب وعرض التأثير من متصفح Google.