Selain menggunakan canvas untuk menerapkan filter, Anda juga dapat menggunakan teknologi di luar layar yang berfungsi seperti kaca pembesar.
Untuk memudahkan penjelasan, artikel ini dibagi menjadi 2 bagian aplikasi:
Pembelajaran kanvas dan implementasi filter telah diperkenalkan ke antarmuka drawImage . Selain menggambar gambar, antarmuka ini juga dapat menggambar satu objek canvas ke objek canvas lainnya . Ini adalah teknologi di luar layar.
Di dalam kodenya, ada dua tag kanvas. Mereka masing-masing terlihat dan tidak terlihat. Objek Context pada objek kanvas tak kasat mata merupakan tempat kita meletakkan watermark gambar.
Untuk lebih jelasnya, silakan lihat komentar kode:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Pelajari Kanvas</title> <style> canvas { display: block; margin: 0 batas otomatis: 1px solid # 222; } masukan { tampilan: blok; margin: 20 piksel lebar otomatis: 800 piksel } </style></head><body> <div id=aplikasi> <kanvas id=kanvas-saya></canvas> <tipe input=nilai rentang=1,0 min=0,5 maks=3,0 langkah=0,1> <id kanvas=watermark-canvas style=display: none;></canvas> </div> <tipe skrip=teks/javascript> window.onload = function () { var canvas = document.querySelector(#my-canvas) var watermarkCanvas = document.querySelector(#watermark-canvas) var slider = document.querySelector(input) var scale = slider.value var ctx = canvas.getContext('2d') var watermarkCtx = watermarkCanvas.getContext(2d) /* untuk yang kedua Tambahkan watermark pada objek Context yang diperoleh canvas */ watermarkCanvas.width = 300 watermarkCanvas.height = 100 watermarkCtx.font = tebal 20px Arial watermarkCtx.lineWidth = 1 watermarkCtx.fillStyle = rgba(255, 255, 255, 0.5) watermarkCtx.fillText(=== yuanxin.me ===, 50, 50) /**** **********************************/ var img = Gambar baru() img.src = ./img/photo.jpg /* Melakukan operasi setelah memuat gambar*/ img.onload = function () { canvas.width = img.width = img.height; drawImageByScale(canvas, ctx, img, scale , watermarkCanvas); // Dengarkan event gerakan mouse dari tag input // Catatan: mousemove memantau perubahan nilai secara real time dan menggunakan memori yang besar. slider.onmousemove = function () { scale = slider.value drawImageByScale(canvas, ctx, img, scale, watermarkCanvas); * **********/ } /** * * @param {Objek} objek kanvas kanvas* @param {Objek} ctx * @param {Objek} img * @param {Nomor} skala Rasio penskalaan* @param {Objek} tanda air objek tanda air*/ function drawImageByScale(kanvas, ctx, img, skala, tanda air) { //Gambar diskalakan sesuai dengan rasio var lebar = img.lebar * skala, tinggi = img. tinggi * skala // (dx, dy): Koordinat awal menggambar img di kanvas var dx = kanvas.lebar / 2 - lebar / 2, dy = kanvas.tinggi / 2 - height / 2 ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 bersihkan kanvas ctx.drawImage(img, dx, dy, width, height) // No2 gambar ulang gambar if (watermark) { // No3 Tentukan apakah ada watermark: Ya, gambar watermark ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - tanda air.tinggi) } } </script></body></html>Efeknya ditunjukkan pada gambar di bawah ini:
Seret penggeser untuk memperbesar dan memperkecil gambar. Lalu klik kanan untuk menyimpan gambar. Gambar yang disimpan sudah memiliki watermark, seperti gambar di bawah ini:
3. Gunakan kaca pembesarBerdasarkan zoom tengah yang disebutkan di atas, ahli kaca pembesar perlu memperhatikan dua bagian berikut:
Kodenya adalah sebagai berikut:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Dokumen</title> <style> kanvas { display: block; margin: 0 batas otomatis: 1px solid #222 ; } </style></head><body> <kanvas id=kanvas-saya></canvas> <kanvas id=off-canvas style=display: none;></canvas> <skrip> var isMouseDown = false, scale = 1.0 var canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#off-canvas) // Kanvas di luar layar var ctx = canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //Objek konteks kanvas di luar layar var img = new Image() window.onload = function () { img.src = ./img/photo.jpg img.onload = function () { canvas.width = img.width canvas.height = img.height offCanvas.width = img.width offCanvas.height = img .height // Hitung rasio penskalaan scale = offCanvas.width / canvas.width // Dalam keadaan perkenalan pertama, kedua kanvas menggambar Gambar ctx.drawImage(img, 0, 0, canvas.width, canvas.height) offCtx.drawImage(img, 0, 0, canvas.width, canvas.height) } // Mouse menekan canvas.onmousedown = function (event) { event.preventDefault() // Menonaktifkan event default var point = windowToCanvas(event.clientX, event.clientY) // Mendapatkan koordinat mouse relatif terhadap label kanvas isMouseDown = true drawCanvasWithMagnifier(true, point) // Menggambar gambar yang diperbesar pada kanvas di luar layar} // Memindahkan mouse canvas.onmousemove = function (event) { event.preventDefault () / / Nonaktifkan event default if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawCanvasWithMagnifier(true, point) } } // Lepaskan mouse canvas.onmouseup = function (event) { event.preventDefault() // Nonaktifkan event default isMouseDown = false drawCanvasWithMagnifier(false) // Jangan menggambar kaca pembesar di luar layar} // Pindah mouse keluar dari label kanvas canvas .onmouseout = function (event) { event.preventDefault() // Nonaktifkan event default isMouseDown = false drawCanvasWithMagnifier(false) // Jangan menggambar kaca pembesar di luar layar} } /** * Mengembalikan koordinat mouse relatif terhadap sudut kiri atas kanvas * @param {Nomor} x Koordinat layar mouse x * @param {Nomor} y Koordinat layar mouse y */ function windowToCanvas(x , y) { var bbox = canvas.getBoundingClientRect() // bbox menyimpan koordinat kanvas relatif terhadap layar return { x: x - bbox.x, y: kamu - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, canvas.width, canvas.height) // Kosongkan kanvas ctx.drawImage(img, 0, 0, canvas.width, canvas .height) // Menggambar gambar di kanvas/* Gunakan di luar layar untuk menggambar kaca pembesar*/ if (isShow) { var { x, y } = titik var mr = 50 // Panjang sisi kaca pembesar persegi // (sx, sy): Koordinat awal bayangan yang akan diperbesar var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): Diperbesar Koordinat awal gambar var dx = x - mr, dy = y - mr // Membuat luas persegi dimulai dari (sx, sy) di offCanvas yang panjang dan lebarnya mr // Perbesar // Area persegi yang terlihat dimulai dari (dx, dy) pada kanvas dengan panjang dan lebar 2 * mr // Ini menghasilkan efek pembesaran ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * bapak, 2 * bapak) } /************************/ } </script></body></html >Efek kaca pembesar seperti terlihat pada gambar di bawah ini (area yang ditandai dengan pena merah adalah kaca pembesar persegi kita):
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.