بالإضافة إلى استخدام canvas لتنفيذ المرشحات، يمكنك أيضًا استخدام تقنية خارج الشاشة لتعمل مثل العدسة المكبرة.
ولتسهيل الشرح، تم تقسيم هذه المقالة إلى قسمين للتطبيق:
تم تقديم تعلم Canvas وتنفيذ المرشح إلى واجهة drawImage . بالإضافة إلى رسم الصور، يمكن لهذه الواجهة أيضًا رسم كائن canvas واحد على كائن canvas آخر . هذه هي التكنولوجيا خارج الشاشة.
يوجد في الكود علامتان قماشيتان. فهي مرئية وغير مرئية على التوالي. كائن السياق على كائن القماش غير المرئي هو المكان الذي نضع فيه العلامة المائية للصورة.
لمزيد من التفاصيل، يرجى الاطلاع على تعليقات الكود:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>تعلم القماش</title> <style> قماش { العرض: كتلة الهامش: 0 حد تلقائي: 1 بكسل صلب #؛ 222 } الإدخال { العرض: كتلة الهامش: 20 بكسل العرض: 800 بكسل } </style></head><body> <div id=app> <canvas id=my-canvas></canvas> <input type=range value=1.0 min=0.5 max=3.0 step=0.1> <canvas id=watermark-canvas style=display: none;></canvas> </div> <script type=text/javascript> window.onload = function () { var Canvas = document.querySelector(#my-canvas) var watermarkCanvas = document.querySelector(#watermark-canvas) var Slider = document.querySelector(input) varscale = Slider.value var ctx = Canvas.getContext('2d') var watermarkCtx = watermarkCanvas.getContext(2d) /* للثانية أضف علامة مائية إلى كائن السياق الذي تم الحصول عليه بواسطة اللوحة القماشية */ watermarkCanvas.width = 300 watermarkCanvas.height = 100 علامة مائيةCtx.font = غامق 20px Arial watermarkCtx.lineWidth = 1 علامة مائيةCtx.fillStyle = rgba(255, 255, 255, 0.5) watermarkCtx.fillText(=== yuanxin.me ===, 50, 50) /**** ************************************/ var img = new Image() img.src = ./img/photo.jpg /* تنفيذ العمليات بعد تحميل الصورة*/ img.onload = function () { Canvas.width = img.width; مقياس، علامة مائية كانفاس)؛ // استمع إلى حدث تحريك الماوس لعلامة الإدخال // ملاحظة: يراقب mousemove تغيرات القيمة في الوقت الفعلي ويستهلك ذاكرة كبيرة. * **********/ } /** * * @param {Object} كائن قماش قماش * @param {Object} ctx * @param {Object} img * @param {Number} مقياس نسبة القياس* @param {Object} كائن العلامة المائية للعلامة المائية*/ function drawImageByScale(canvas, ctx, img,scale, watermark) { // يتم تغيير حجم الصورة وفقًا للنسبة var width = img.width *scale, height = img. height *scale // (dx, dy): إحداثيات البداية لرسم img على القماش var dx = Canvas.width / 2 - width / 2, dy = Canvas.height / 2 - الارتفاع / 2 ctx.clearRect(0, 0, Canvas.width, Canvas.height) // No1 امسح اللوحة القماشية ctx.drawImage(img, dx, dy, width, height) // No2 أعد رسم الصورة إذا (علامة مائية) { // No3 تحديد ما إذا كانت هناك علامة مائية: نعم، ارسم العلامة المائية ctx.drawImage(watermark, Canvas.width - watermark.width, Canvas.height - watermark.height) } } </script></body></html>يظهر التأثير في الشكل أدناه:
اسحب شريط التمرير لتكبير الصورة وتصغيرها. ثم انقر بزر الماوس الأيمن لحفظ الصورة. ستحتوي الصورة المحفوظة بالفعل على علامة مائية، كما هو موضح أدناه:
3. تنفيذ عدسة مكبرةعلى أساس التكبير المركزي المذكور أعلاه، يحتاج سيد العدسة المكبرة إلى الانتباه إلى الجزأين التاليين:
الرمز هو كما يلي:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> Canvas { Display: block; border: 0 auto; border: 1px Solid #222 } </style></head><body> <canvas id=my-canvas></canvas> <canvas id=off-canvas style=display: none;></canvas> <script> var isMouseDown = false,scale = 1.0 var Canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#off-canvas) // قماش خارج الشاشة var ctx = Canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) // كائن سياق اللوحة القماشية خارج الشاشة var img = new Image() window.onload = الوظيفة () { img.src = ./img/photo.jpg img.onload = الوظيفة () { Canvas.width = img.width Canvas.height = img.height offCanvas.width = img.width offCanvas.height = img .height // حساب نسبة القياسscale = offCanvas.width / Canvas.width // في حالة التعارف الأولى، ترسم كلتا اللوحتين صورة ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) offCtx.drawImage(img, 0, 0, Canvas.width, Canvas.height) } // تم الضغط على الماوس Canvas.onmousedown = function (event) { events.preventDefault() // تعطيل الحدث الافتراضي var point = windowToCanvas(event.clientX, events.clientY) // احصل على إحداثيات الماوس المتعلقة بملصق اللوحة القماشية isMouseDown = true drawCanvasWithMagnifier(true, point) // ارسم الصورة المكبرة على اللوحة القماشية خارج الشاشة} // حرك الماوس Canvas.onmousemove = function (event) { events.preventDefault () // تعطيل الحدث الافتراضي if (isMouseDown === true) { var point = windowToCanvas(event.clientX, events.clientY) drawCanvasWithMagnifier(true, point) } } // حرر الماوس Canvas.onmouseup = function (event) { events.preventDefault() // تعطيل الحدث الافتراضي isMouseDown = false drawCanvasWithMagnifier(false) // لا ترسم المكبر الموجود خارج الشاشة} // نقل الماوس خارج لوحة الرسم Canvas .onmouseout = function (event) { events.preventDefault() // تعطيل الحدث الافتراضي isMouseDown = false drawCanvasWithMagnifier(false) // لا ترسم عدسة مكبرة خارج الشاشة} } /** * إرجاع إحداثيات الماوس بالنسبة إلى الزاوية اليسرى العليا من اللوحة القماشية * @param {Number} x إحداثيات شاشة الماوس x * @param {Number} y إحداثيات شاشة الماوس y */ function windowToCanvas(x , y) { var bbox = Canvas.getBoundingClientRect() // يخزن bbox إحداثيات اللوحة القماشية المتعلقة بالشاشة return { x: x - bbox.x, y: ذ - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, Canvas.width, Canvas.height) // امسح اللوحة القماشية ctx.drawImage(img, 0, 0, Canvas.width, Canvas height) // ارسم صورة على القماش/* استخدم خارج الشاشة لرسم عدسة مكبرة*/ if (isShow) { var { x, y } = point. var mr = 50 // الطول الجانبي للعدسة المكبرة المربعة // (sx, sy): إحداثيات البداية للصورة المراد تكبيرها var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): مكبرة إحداثيات البداية للصورة var dx = x - mr, dy = y - mr // قم بإنشاء مساحة مربعة تبدأ من (sx, sy) على offCanvas بطولها وعرضها mr // قم بالتكبير إلى // منطقة مرئية مربعة تبدأ من (dx, dy) على اللوحة القماشية بطول وعرض 2 * mr // يحقق هذا تأثير التكبير ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * السيد , 2 * السيد) } /************************/ } </script></body></html >تأثير العدسة المكبرة كما هو موضح في الصورة أدناه (المنطقة المحددة بالقلم الأحمر هي العدسة المكبرة المربعة):
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.