Native js+canvas realizes the function of cropping pictures

This article uses a css attribute clip. I am sure that many people do not know this attribute, because this attribute is used too little, and this attribute is only used under certain conditions. Here I will tell you about its usage in general. If you want to know more about this property, you can check the information. I will not tell you about it here. Here is mainly how to use this property to achieve the function of selecting pictures.

To understand the property of clip, you must first know the syntax of this property: clip: rect (top, right, bottom, left), the feature of the clip property is that only the area wrapped by these values ​​is displayed, and all other areas are hidden.

The function of selecting pictures is mainly divided into three parts:

The first part: It is only a picture for display, and no functional processing is performed on this picture.

The second part: It is also a picture. This picture is overlaid on the picture in the first chapter. Only the selected part is displayed using the clip property, and the others are hidden.

The third part: draws the selected image area in the preview area by using the image interface of canvas

The general effect is shown in the figure:



Next, I will go directly to the code. I am a beginner with limited ability. I welcome the guidance of the great gods.

HTML part:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image crop</title>
<script src="js/test.js" ></script>
<script src="js/jquery-1.8.1.min.js" ></script>
<script src="js/jquery-ui-1.10.4.custom.min.js" ></script>
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<img src="images/1.jpg" id="img1"/>
<img src="images/1.jpg" id="img2"/>
<div id="main">
<div class="div minDiv" id="up"></div>
<div class="div minDiv2" id="left_up"></div>
<div class="div minDiv3" id="right_up"></div>
<div class="div minDiv4" id="left"></div>
<div class="div minDiv5" id="right"></div>
<div class="div minDiv6" id="left_down"></div>
<div class="div minDiv7" id="down"></div>
<div class="div minDiv8" id="right_down"></div>
</div>
</div>
<div id="preview">
<canvas id="canvas"></canvas>
</div>
</body>
</html>

css part:

body{
background: #333;
}
#box{
position:absolute;
top: 1rem;
left: 2rem;
height: 3.5rem;
width: 5rem;
}
#img1{
position: absolute;
opacity: 0.6;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#img2{
position: absolute;
top: 0;
left: 0;
clip: rect(0,0.2rem,0.2rem,0);
width: 100%;
height: 100%;
}
#main{
position: absolute;
border: 1px dashed  #fff;
height: 2rem;
width: 2rem;
cursor: move;
}
.div{
position: absolute;
width: 0.08rem;
height: 0.08rem;
background: #fff;
}
.minDiv {
left: 50%;
margin-left: -0.04rem;
top: -0.04rem;
cursor: n-resize;
}
.minDiv2 {
top: -0.04rem;
left: -0.04rem;
cursor: nw-resize;
}
.minDiv3{
top: -0.04rem;
right: -0.04rem;
cursor: ne-resize;
}
.minDiv4{
top: 50%;
left: -0.04rem;
margin-top: -0.04rem;
cursor: w-resize;
}
.minDiv5{
top: 50%;
margin-top: -0.04rem;
right: -0.04rem;
cursor: e-resize;
}
.minDiv6 {
bottom: -0.04rem;
left: -0.04rem;
cursor: ne-resize;
}
{.minDiv7}
bottom: 0;
left: 50%;
margin-bottom: -0.04rem;
margin-left: -0.04rem;
cursor: s-resize;
}
.minDiv8{
bottom: 0;
margin-bottom: -0.04rem;
right: -0.04rem;
cursor: se-resize;
}
#preview{
position: absolute;
width: 2rem;
height: 2rem;
top: 1rem;
left: 10rem;
overflow: hidden;
}
#img3{
position: absolute;
}
#canvas{
height: 100%;
width: 100%;
background: #fff;
border: 1px solid #aaa;
}

js part:

window.onload = function(){
document.onselectstart = new Function('event.returnValue=false;');//Forbid the picture to be selected
var box = document.getElementById('box');
var rightDiv = document.getElementById('right');//Right contact
var mainDiv = document.getElementById('main');
var up = document.getElementById('up');
var left = document.getElementById('left');
var down = document.getElementById('down');
var left_up = document.getElementById('left_up');
var right_up = document.getElementById('right_up');
var left_down = document.getElementById('left_down');
var right_down = document.getElementById('right_down');
var ifKeyDown = false;//Mouse down state
var contact = "";//Indicates the pressed contact
setChoice ();
//mouse press event
rightDiv.onmousedown = function(e){
e.stopPropagation();//Stop event bubbling
ifKeyDown = true;
contact = "rightDiv";
}
up.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "up";
}
left.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "left"
}
down.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "down";
}
left_up.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "left_up";
}
left_down.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "left_down";
}
right_up.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "right_up";
}
right_down.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "right_down";
}
mainDiv.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "box";
}
//mouse release event
window.onmouseup = function(){
ifKeyDown = false;
contact = "";
}
//mouse move event
window.onmousemove = function(e){
if(ifKeyDown){
switch (contact){
case "rightDiv":rightMove(e);break;
case "up":upMove(e);break;
case "left":leftMove(e);break;
case "down":downMove(e);break;
case "left_up":leftMove(e);upMove(e);break;
case "left_down":leftMove(e);downMove(e);break;
case "right_up":rightMove(e);upMove(e);break;
case "right_down":rightMove(e);downMove(e);break;
// case "box":tuo(e);break;
}

}
setChoice ();

}
//marquee press and drag event
var disX;
var disY;
mainDiv.onmousedown = function(e){
ifKeyDown = true;
var oEvent = e || event;
disX = oEvent.clientX - mainDiv.offsetLeft;
disY = oEvent.clientY - mainDiv.offsetTop;
document.onmousemove = function(e){
var oEvent = e || event;
var l = oEvent. clientX - disX;
var t = oEvent.clientY - disY;
if (l < 0) {
l = 0;
} else if(l > box.offsetWidth - mainDiv.offsetWidth){
l = box.offsetWidth - mainDiv.offsetWidth;
}
if (t < 0) {
t = 0;
} else if(t > box.offsetHeight - mainDiv.offsetHeight){
t = box.offsetHeight - mainDiv.offsetHeight;
}
mainDiv.style.top = t +"px";
mainDiv.style.left = l +"px";
setPreview();
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup =null;
}
return false;

}
//Set the selected area to be highlighted and visible
function setChoice(){
var top = mainDiv.offsetTop;
var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
var left = mainDiv.offsetLeft;
var img2 = document.getElementById('img2');
img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
setPreview();
}
//Get the zoom ratio of the image
function bili(img,box){
var w = Math.round(img.width / box.offsetWidth * 100) / 100;
var h = Math.round(img.height / box.offsetHeight * 100) /100;
return {"w":w,"h":h};
}
//preview function
function setPreview(){
var l = mainDiv.offsetLeft;//The coordinates of the upper left corner of the marquee
var t = mainDiv.offsetTop;
var tt = right_down.offsetTop - right_up.offsetTop;//The height of the marquee
var ll = right_down.offsetLeft - left_down.offsetLeft;//宽度
console.log(l+"  "+ t)
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var box = document.getElementById('box');
var img = new Image();
img.src = "images/1.jpg";
img.onload = function(){
context.drawImage(img,l*bili(img,box).w,t*bili(img,box).h,ll*bili(img,box).w,tt*bili(img,box).h,0,0,canvas.width,canvas.height);
}
}
//move right
function rightMove(e){
var x = e.clientX;//Mouse X coordinate s
if (x > getPosition(box).left + box.offsetWidth) {
x = getPosition(box).left + box.offsetWidth;
}
var widthBefore = mainDiv.offsetWidth-2;//The width of the marquee before transformation
var addWidth = "";//The width of the marquee increases after the mouse is moved
addWidth = x - getPosition(mainDiv).left - widthBefore;//The width that increases after the mouse moves
mainDiv.style.width = addWidth + widthBefore + "px";//The width of the marquee after transformation
}
// move up
function upMove(e){
var y = e.clientY;//Mouse ordinate
if(y < getPosition(box).top){
y = getPosition(box).top;
}
var heightBefore = mainDiv.offsetHeight - 2;//Original height
var mainY = getPosition(mainDiv).top;//The distance of the marquee relative to the top of the screen
var addHeight = mainY - y;//Increased height
mainDiv.style.height = heightBefore + addHeight +"px";
mainDiv.style.top = mainDiv.offsetTop - addHeight +"px";
}
// move down
function downMove(e){
var y = e.clientY;//Mouse ordinate
if(y > getPosition(box).top + box.offsetHeight){
y = getPosition(box).top + box.offsetHeight
}
var heightBefore = mainDiv.offsetHeight - 2;//Height before marquee transformation
var mainY = getPosition(mainDiv).top;//The height of the marquee relative to the parent
var addHeight = y - heightBefore - mainY;//Increased height
mainDiv.style.height = addHeight +heightBefore + "px";
}
//move left
function leftMove(e){
var x = e.clientX;//The coordinates of the mouse
if(x < getPosition(box).left){
x = getPosition(box).left;
}
var widthBefore = mainDiv.offsetWidth - 2;//The width before the marquee changes
var mainX = getPosition(mainDiv).left;
var addWidth = mainX - x ;//Increased width
mainDiv.style.width = widthBefore + addWidth + "px";//Width after selection
mainDiv.style.left = mainDiv.offsetLeft - addWidth +"px";
}
}


//Get the distance of the element relative to the left side of the screen
function getPosition(obj){
var left = obj.offsetLeft;
var top = obj.offsetTop;
var parent = obj.offsetParent;
while(parent != null){
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;

}
return {"left":left,"top":top};
}

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325693054&siteId=291194637