Shulou(Shulou.com)06/03 Report--

This article mainly introduces js how to achieve picture cutting function, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

The details are as follows

Code:

Title .cube {height: 0; width: 0; position: absolute; left: 0; top:0; box-sizing: border-box; background-color: lightseagreen; opacity: .3; z-index: 99 } # big {border: 1px solid black; height: 500px; width: 500px; position: relative; background-image: url ("img/pixel.png"); line-height: 500px; overflow: hidden; vertical-align: middle; text-align: center; float: left } # big > img {line-height: 500px; vertical-align: middle; max-height: 100%; max-width: 100%; pointer-events: none;} .cv {position: relative; float: left; border: 2px solid lightseagreen;} let count=0 Let cdirection bdheme p1reparentcvrexredlerg reparationp; _ window.onload=function () {c=document.querySelectorAll (".cube"); b=document.getElementById ("big"); cv=document.getElementById ("c"); cx=cv.getContext ('2d'); img=new Image (); d=b.querySelector ("img"); img.src=d.src Img.onload=function () {cx.drawImage (img, 0meme 0for500, 0500500); p=img.width/b.querySelector ("img"). Width; console.log (img);} p1 = {x p=img.width/b.querySelector 0, y v 0} B.addEventListener ("click", function (e) {count++; if (count===1) {p1.x=e .offsetX; p1.yposte.offsetY; p2.x=e .offsetX) P2.yroome.offsetY; f2 (); f4 ();} if (count===2) {p2.xroome.offsetX; p2.yroome.offsetY; myDraw ();}}) Function F1 () {c [0] .style.height = p2.y + "px"; c [1] .style.height = p2.y+ "px"; c [2] .style.height = p2.y+ "px"; c [3] .style.top = p2.y + "px"; c [4] .style.top = p2.y+ "px" C [3] .style.height = (p1.y-p2.y) + "px"; c [4] .style.height = (p1.y-p2.y) + "px"; c [5] .style.top = p1.y + "px"; c [6] .style.top = p1.y + "px" C [5] .style.height = (b.offsetHeight-p1.y) + "px"; c [6] .style.height=b.offsetHeight-p1.y+ "px"; c [7] .style.top = p1.y + "px"; c [7] .style.height = (b.offsetHeight-p1.y) + "px" } function f2 () {c [0] .style.height = p1.y+ "px"; c [1] .style.height = p1.y+ "px"; c [2] .style.height = p1.y+ "px"; c [3] .style.top = p1.y + "px"; c [4] .style.top = p1.y+ "px" C [3] .style.height = (p2.y-p1.y) + "px"; c [4] .style.height = (p2.y-p1.y) + "px"; c [5] .style.top = p2.y + "px"; c [6] .style.top = p2.y + "px" C [5] .style.height = (b.offsetHeight-p2.y) + "px"; c [6] .style.height=b.offsetHeight-p2.y+ "px"; c [7] .style.top = p2.y + "px"; c [7] .style.height = (b.offsetHeight-p2.y) + "px" } function f3 () {c [0] .style.width = p2.x + "px"; c [1] .style.left = p2.x + "px"; c [1] .style.width = (p1.x-p2.x) + "px"; c [2] .style.left = p1.x + "px" C [2] .style.width = (b.offsetWidth-p1.x) + "px"; c [3] .style.width = p2.x + "px"; c [4] .style.left = p1.x + "px"; c [4] .style.width = (b.offsetWidth-p2.x) + "px"; c [5] .style.width = p2.x + "px" C [6] .style.left = p2.x + "px"; c [6] .style.width = (p1.x-p2.x) + "px"; c [7] .style.left = p1.x + "px"; c [7] .style.width = (b.offsetWidth-p1.x) + "px" } function f4 () {c [0] .style.width = p1.x + "px"; c [1] .style.left = p1.x + "px"; c [1] .style.width = (p2.x-p1.x) + "px"; c [2] .style.left = p2.x + "px" C [2] .style.width = (b.offsetWidth-p2.x) + "px"; c [3] .style.width = p1.x + "px"; c [4] .style.left = p2.x + "px"; c [4] .style.width = (b.offsetWidth-p2.x) + "px"; c [5] .style.width = p1.x + "px" C [6] .style.left = p1.x + "px"; c [6] .style.width = (p2.x-p1.x) + "px"; c [7] .style.left = p2.x + "px"; c [7] .style.width = (b.offsetWidth-p2.x) + "px" } b.addEventListener ("mousemove", function (e) {if (count===1) {p2.xroome.offsetX; p2.yroome.offsetY; if (p2.y)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.