Hari ini saya mempelajari efek pemotongan gambar dari front-end web lagi. Ada area untuk membingkai bagian tertentu dari gambar dan pratinjau bagian kotak.
Rendering adalah sebagai berikut:
Bukankah itu terlihat sangat keren
Mari kita perkenalkan secara singkat metode implementasi
1. Tata letak adalah dua div di sebelah kiri dan kanan. Yang di sebelah kanan mudah dikatakan, terutama di sebelah kiri. Yang di sebelah kiri dibagi menjadi tiga lapisan dalam tata letak absolut. Lapisan bawah adalah gambar tembus cahaya, dan lapisan tengah adalah gambar asli, tetapi dipotong menjadi hanya satu bagian, dan hanya bagian ini yang ditampilkan. Anda dapat menggunakan klip: Metode Rect untuk mengimplementasikannya. Kemudian lapisan atas adalah perbatasan yang ditulis sendiri. 8 poin ditambahkan ke perbatasan, dan posisi masing -masing didefinisikan untuk 8 poin ini.
2. Kemudian kode JS diimplementasikan menggunakan acara klik mouse.
Posting kode Anda sendiri di bawah ini:
index.html (kita perlu merujuk ke dua file JS, yaitu jQuery dan jQuery-ui. Di antaranya, jQuery dapat merujuk secara online. Saya mengutip jQuery-ui secara lokal sendirian. Anda dapat mengunduhnya sendiri di situs web resmi. Jika Anda tidak mengutipnya, Anda tidak dapat menerapkan seret dan cutting box)
<! Doctype html> <html> <head lang = "en"> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <Title> cutting gambar </iteme> <script src = "http://cdn.bootcs.mcom/jits =" http://cdn.bootcscoC. " type = "Text/JavaScript"> </script> <skrip src = "js/jQuery-ui-ui-1.12.0/jquery-ui.min.js"> </script> <tautan href = "img.css" rel = "styles" type = "text/css"/<script script = " src = "img.js"> </script> </ head> <body> <v id = "box"> <img src = "gambar/1.jpg" id = "img1"> <img src = "gambar/1.jpg" id = "img2"> <v id = "Main"> <Div ID = "Left-up"> </Div2 "> <v id =" Main "> <Div ID =" Left-up "> </Div2"> <v ID = "Main"> <Div ID = "Left-up"> id = "right-up"> </div> <div id = "kanan-turun"> </div> <div id = "kanan-turun"> </div> <div id = "left-down"> </div> <div id = "kiri"> </div> </div> </div> <v id = "preview"> <img src = "gambar/1.JPG =" body img.css {latar belakang: #333;} #box {position: absolute; TOP: 200PX; Kiri: 100px; Lebar: 600px; Tinggi: 319px;}#img1 { /*opacity* / opacity: 0.3; Posisi: Absolute; TOP: 0; Kiri: 0;}#img2 {position: absolute; TOP: 0; Kiri: 0; /*Klip fungsi: rect (atas, kanan, bawah, kiri); top represents the distance from the top of the clip area to the top of the picture right represents the distance from the right of the clip area to the left of the picture, that is, the length + left bottom represents the distance from the bottom of the clip area to the top of the picture, that is, the width + top left represents the distance from the left of the clip area to the left of the picture*/ clip: rect(0, 200px, 200px, 0);}#main { position: absolut; Perbatasan: 1px solid #fff; Lebar: 200px; Tinggi: 200px;}#Pratinjau {Posisi: Absolute; Lebar: 600px; Tinggi: 319px; TOP: 200PX; Kiri: 720px;}#Pratinjau IMG { /*Untuk membuat fungsi klip dalam fungsi setPreview berfungsi, Anda perlu menambahkan posisi absolut atau posisi relatif ke IMG, tetapi karena elemen induk adalah posisi absolut, ini adalah penentuan posisi absolut* / posisi: absolute;}. Mindiv {position: absolute; Lebar: 8px; Tinggi: 8px; latar belakang-warna: #fff;}. Left-up {top: -4px; Kiri: -4px; /*Ganti tikus n-n-north w-west s-south e-east*/ kursor: nw-resize;}. Naik {/*jarak ke kiri elemen induk yang posisi terdekatnya absolut atau relatif adalah 50%dari jarak ke kiri elemen induk yang posisi terdekatnya absolut atau relatif adalah 50%*/ kiri: 50%; /*Jarak ke kiri -4px berarti pindah ke kiri 4px*/ margin -left: -4px; Atas: -4px; kursor: n-resize;}. kanan-up {kanan: -4px; Atas: -4px; kursor: ne-resize;}. kanan-up {kanan: -4px; Atas: -4px; kursor: ne-resize;}. benar {bottom: -4px; Kanan: -4px; kursor: se-ressize;}. Down {kiri: 50%; margin -kiri: -4px; Bawah: -4px; kursor: s-resize;}. Left-down {left: -4px; Bawah: -4px; kursor: SW-resize;}. Kiri {Bottom: 50%; margin -bottom: -4px; Kiri: -4px; Kursor: w-resize;} img.js // Jalankan setelah elemen dimuat untuk memastikan bahwa elemen dapat berhasil mendapatkan window.onload = function () {document.onselectStart = function baru ('event.returnValue = false;'); $ ("#main"). Draggable ({containment: 'Parent', seret: setChoice}); var img = document.geteLementById ("img2"); var rightDiv = document.getElementById ("right"); var updiv = document.geteLementById ("up"); var leftDiv = document.getElementById ("left"); var downdiv = document.getElementById ("down"); var leftupdiv = document.getElementById ("left-up"); var rightupDiv = document.getElementById ("right-up"); var rightDownDiv = document.getElementById ("kanan-turun"); var leftDownDiv = document.getElementById ("left-down"); var maindiv = document.geteLementById ("main"); var ifkeydown = false; var contact = ""; // menunjukkan titik kontak yang ditekan // mouse down state rightDiv.onmousedown = function (e) {/* jQuery dan jQuery-ui yang diperkenalkan oleh efek drag juga akan memicu acara klik mouse. Oleh karena itu, untuk mencegah acara klik yang Anda tentukan dan acara klik yang Anda perkenalkan, lulus di E dan tambahkan pernyataan berikut untuk mencegah gelembung. Bubble berarti bahwa beberapa peristiwa elemen induk juga akan dipicu ketika mouse mengklik pada elemen*/ e.stoppropagation (); ifkeydown = true; kontak = "benar"; } updiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; kontak = "up"; } leftDiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; kontak = "kiri"; } downdiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; kontak = "turun"; } leftupdiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "left-up"; } rightUpdiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "kanan-up"; } rightDownDiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "kanan-bawah"; } leftDownDiv.onMousEdown = function (e) {e.stoppropagation (); ifkeydown = true; kontak = "left-down"; } // status rilis mouse window.onmouseUp = function () {ifkeydown = false; } // mouse mouse event window.onmouseMove = function (e) {if (ifkeydown == true) {switch (contact) {case "right": rightMove (e); merusak; kasus "up": upmove (e); merusak; kasus "kiri": LeftMove (E); merusak; case "down": downmove (e); merusak; case "left-up": leftmove (e); upmove (e); merusak; kasus "tepat": rightmove (e); upmove (e); merusak; case "kanan-bawah": rightmove (e); downmove (e); merusak; case "left-down": leftmove (e); downmove (e); merusak; }} setChoice (); setPreview (); } // pindahkan sisi kanan SIGHOVEVOVE (E) {var x = E.ClientX; // mouse x koordinat var addwidth = ""; // Lebar meningkat dengan pemilihan tenda setelah mouse bergerak var widthbefore = maindiv.offsetwidth - 2; // Lebar sebelum marquee berubah, mengurangi 2 adalah untuk mengurangi lebar perbatasan, dan sisi kiri dan kanan adalah 1px, sehingga 2 addwidth = x - getPosition (MainDiv). LEFT // Lebar yang ditingkatkan oleh mouse bergerak jika (widthbeFore <= iMg.width) {Maindiv.th. // Lebar setelah tenda berubah} else {maindiv.style.width = img.width + "px"; }} // pindahkan fungsi upmove (e) {var topbefore = maindiv.offsettop; var y = e.clienty; // mouse vertikal koordinat var addheight = 0; var mainy = getPosition (mainDiv) .top; // jarak tenda seleksi ke bagian atas layar addheight = y - mainy; // Peningkatan tinggi, var heightbefore = MainDiv.OffsetHeight - 2; var Bottom = TopBefore + HeightBefore; var heavenafter = heaveBefore - addheight; var topafter = maindiv.offsettop + addheight; if (TopAfter <Bottom && Topafter> -2) {MainDiv.Style.height = HeightAfter + "PX"; maindiv.style.top = topafter + "px"; }} // Pindahkan fungsi kiri kiri (e) {// Jarak dari sisi kiri elemen induk sebelum sisi kiri sisi kiri sisi kiri elemen induk var leftbefore = maindiv.offsetleft; // Jarak dari mouse ke sisi kiri browser var x = e.clientx; // Tentukan peningkatan lebar var addwidth = 0; // Lebar kotak klip sebelum perubahan var widthbefore = MainDiv.OffsetWidth - 2; // Jarak perbatasan kiri dari browser sebelum perubahan var maindivleft = getPosition (MainDiv). Left; // Jarak perbatasan kanan dari kiri elemen induk var kanan = LeftBeFore + lebar; // Lebar kotak klip setelah perubahan var widthafter = widthbefore - addwidth; // Jarak kotak klip dari kiri setelah perubahan var leftafter = MainDiv.Offsetleft + addwidth; // Cegah perbatasan kiri bergerak ke area di luar perbatasan kanan jika (LeftAfter <kanan && leftafter> -2) {// Tentukan lebarnya yang diubah MainDiv.Style.Width = widthafter + "px"; // Tentukan jarak dari elemen induk kiri setelah perubahan maindiv.style.left = leftAfter + "px"; }} // Pindahkan fungsi lebih rendah downmove (e) {var y = e.clienty; var addheight = 0; var heightbefore = MainDiv.OffsetHeight - 2; addheight = y - getPosition (MainDiv) .top; if (heightbefore <= img.height) {maindiv.style.height = addheight + "px"; } else {maindiv.style.height = img.height + "px"; }} // Dapatkan jarak elemen relatif ke kiri layar, gunakan offsetleft // node sebagai fungsi elemen lulus getPosition (node) { /*Dapatkan margin kiri elemen relatif ke elemen induk* / var left = node.offsetLeft; /*Dapatkan margin atas elemen relatif terhadap elemen induk*/ var top = node.offsettop; /*Dapatkan elemen induk dari elemen*/ var parent = node.offsetParent; /*Menilai apakah elemen induk ada. Jika ada, margin kiri ditambahkan dan jarak antara elemen dan batas kiri browser dihitung*/ while (Parent! = NULL) {/*Loop mengakumulasi margin kiri elemen anak relatif terhadap elemen induk*/ kiri += Parent.offsetleft; /*Loop mengakumulasi margin atas elemen anak relatif terhadap elemen induk*/ atas += parent.offsettop; /*Loop memperoleh elemen induk dari elemen induk sampai tidak ada elemen induk*/ induk = parent.OffsetParent; } return {"left": left, "top": top}; } // Atur area yang dipilih untuk menyorot dan fungsi yang terlihat setChoice () {var top = maindiv.offsettop; var right = maindiv.offsetleft + maindiv.offsetWidth; var bottom = maindiv.offsettop + maindiv.offsetHeight; var left = maindiv.offsetleft; img.style.clip = "rect ("+top+"px,"+right+"px,"+Bottom+"px,"+left+"px"+")"} // fungsi fungsi pratinjau setPreview () {var top = maindiv.offsettop; var right = maindiv.offsetleft + maindiv.offsetWidth; var bottom = maindiv.offsettop + maindiv.offsetHeight; var left = maindiv.offsetleft; var img3 = document.geteLementById ("img3"); img3.style.clip = "rect ("+ top+ "px,"+ kanan+ "px,"+ bottom+ "px,"+ kiri+ "px"+ ")" img3.style.top = -(atas)+ "px"; img3.style.left = -(kiri) + "px"; }}Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.