Using JavaScript + canvas for image cropping _ jquery-js tutorial

This article mainly introduces how to use JavaScript + canvas to crop images. For more information, see canvas as a label that allows us to use script plotting, it provides a series of complete attributes and methods. We can use this to achieve graphic rendering, image processing, and even simple animation and game production.

The canvas label has only two attributes: width and height, which are used to set the width and height of the canvas. If the canvas is not set through the label attribute or script, the default value is 300*150;

Now, the introduction of canvas is here first. Let's take a look at the image cropping code using javascript and canvas:

The Code is as follows:

Var selectObj = null;
Function ImageCrop (canvasId, imageSource, x, y, width, height ){
Var canvas =$ ("#" + canvasId );
If (canvas. length = 0 & imageSource ){
Return;
}
Function canvasMouseDown (e ){
StopSelect (e );
Canvas.css ("cursor", "default ");
}
Function canvasMouseMove (e ){
Var canvasOffset = canvas. offset ();
Var pageX = e. pageX | event.tar getTouches [0]. pageX;
Var pageY = e. pageY | event.tar getTouches [0]. pageY;
IMouseX = Math. floor (pageX-canvasOffset. left );
IMouseY = Math. floor (pageY-canvasOffset. top );
Canvas.css ("cursor", "default ");
If (selectObj. bDragAll ){
Canvas.css ("cursor", "move ");
Canvas. data ("drag", true );
Var cx = iMouseX-selectObj. px;
Cx = cx <0? 0: cx;
Mx = ctx. canvas. width-selectObj. w;
Cx = cx> mx? Mx: cx;
SelectObj. x = cx;
Var cy = iMouseY-selectObj. py;
Cy = cy <0? 0: cy;
My = ctx. canvas. height-selectObj. h;
Cy = cy> my? My: cy;
SelectObj. y = cy;
}
For (var I = 0; I <4; I ++ ){
SelectObj. bHow [I] = false;
SelectObj. iCSize [I] = selectObj. csize;
}
// Hovering over resize cubes
If (iMouseX> selectObj. x-selectObj. csizeh & iMouseX <selectObj. x + selectObj. csizeh &&
IMouseY> selectObj. y-selectObj. csizeh & iMouseY <selectObj. y + selectObj. csizeh ){
Canvas.css ("cursor", "pointer ");
SelectObj. bHow [0] = true;
SelectObj. iCSize [0] = selectObj. csizeh;
}
If (iMouseX> selectObj. x + selectObj. w-selectObj. csizeh & iMouseX <selectObj. x + selectObj. w + selectObj. csizeh &&
IMouseY> selectObj. y-selectObj. csizeh & iMouseY <selectObj. y + selectObj. csizeh ){
Canvas.css ("cursor", "pointer ");
SelectObj. bHow [1] = true;
SelectObj. iCSize [1] = selectObj. csizeh;
}
If (iMouseX> selectObj. x + selectObj. w-selectObj. csizeh & iMouseX <selectObj. x + selectObj. w + selectObj. csizeh &&
IMouseY> selectObj. y + selectObj. h-selectObj. csizeh & iMouseY <selectObj. y + selectObj. h + selectObj. csizeh ){
Canvas.css ("cursor", "pointer ");
SelectObj. bHow [2] = true;
SelectObj. iCSize [2] = selectObj. csizeh;
}
If (iMouseX> selectObj. x-selectObj. csizeh & iMouseX <selectObj. x + selectObj. csizeh &&
IMouseY> selectObj. y + selectObj. h-selectObj. csizeh & iMouseY <selectObj. y + selectObj. h + selectObj. csizeh ){
Canvas.css ("cursor", "pointer ");
SelectObj. bHow [3] = true;
SelectObj. iCSize [3] = selectObj. csizeh;
}
If (iMouseX> selectObj. x & iMouseX <selectObj. x + selectObj. w & iMouseY> selectObj. y & iMouseY <selectObj. y + selectObj. h ){
Canvas.css ("cursor", "move ");
}
// In case of dragging of resize cubes
Var iFW, iFH, iFX, iFY, mx, my;
If (selectObj. bDrag [0]) {
IFX = iMouseX-selectObj. px;
IFY = iMouseY-selectObj. py;
IFW = selectObj. w + selectObj. x-iFX;
IFH = selectObj. h + selectObj. y-iFY;
Canvas. data ("drag", true );
}
If (selectObj. bDrag [1]) {
IFX = selectObj. x;
IFY = iMouseY-selectObj. py;
IFW = iMouseX-selectObj. px-iFX;
IFH = selectObj. h + selectObj. y-iFY;
Canvas. data ("drag", true );
}
If (selectObj. bDrag [2]) {
IFX = selectObj. x;
IFY = selectObj. y;
IFW = iMouseX-selectObj. px-iFX;
IFH = iMouseY-selectObj. py-iFY;
Canvas. data ("drag", true );
}
If (selectObj. bDrag [3]) {
IFX = iMouseX-selectObj. px;
IFY = selectObj. y;
IFW = selectObj. w + selectObj. x-iFX;
IFH = iMouseY-selectObj. py-iFY;
Canvas. data ("drag", true );
}
If (iFW> selectObj. csizeh * 2 & iFH> selectObj. csizeh * 2 ){
SelectObj. w = iFW;
SelectObj. h = iFH;
SelectObj. x = iFX;
SelectObj. y = iFY;
}
DrawScene ();
}
Function canvasMouseOut (){
$ (Canvas). trigger ("mouseup ");
}
Function canvasMouseUp (){
SelectObj. bDragAll = false;
For (var I = 0; I <4; I ++ ){
SelectObj. bDrag [I] = false;
}
Canvas.css ("cursor", "default ");
Canvas. data ("select ",{
X: selectObj. x,
Y: selectObj. y,
W: selectObj. w,
H: selectObj. h
});
SelectObj. px = 0;
SelectObj. py = 0;
}
Function Selection (x, y, w, h ){
This. x = x; // initial positions
This. y = y;
This. w = w; // and size
This. h = h;
This. px = x; // extra variables to dragging calculations
This. py = y;
This. csize = 4; // resize cubes size
This. csizeh = 6; // resize cubes size (on hover)
This. bHow = [false, false]; // hover statuses
This. iCSize = [this. csize, this. csize]; // resize cubes sizes
This. bDrag = [false, false]; // drag statuses
This. bDragAll = false; // drag whole selection
}
Selection. prototype. draw = function (){
Ctx. strokeStyle = '#666 ';
Ctx. lineWidth = 2;
Ctx. strokeRect (this. x, this. y, this. w, this. h );
// Draw part of original image
If (this. w> 0 & this. h> 0 ){
Ctx. drawImage (image, this. x, this. y, this. w, this. h, this. x, this. y, this. w, this. h );
}
// Draw resize cubes
Ctx. fillStyle = '#999 ';
Ctx. fillRect (this. x-this. iCSize [0], this. y-this. iCSize [0], this. iCSize [0] * 2, this. iCSize [0] * 2 );
Ctx. fillRect (this. x + this. w-this. iCSize [1], this. y-this. iCSize [1], this. iCSize [1] * 2, this. iCSize [1] * 2 );
Ctx. fillRect (this. x + this. w-this. iCSize [2], this. y + this. h-this. iCSize [2], this. iCSize [2] * 2, this. iCSize [2] * 2 );
Ctx. fillRect (this. x-this. iCSize [3], this. y + this. h-this. iCSize [3], this. iCSize [3] * 2, this. iCSize [3] * 2 );
};
Var drawScene = function (){
Ctx. clearRect (0, 0, ctx. canvas. width, ctx. canvas. height); // clear canvas
// Draw source image
Ctx. drawImage (image, 0, 0, ctx. canvas. width, ctx. canvas. height );
// And make it darker
Ctx. fillStyle = 'rgba (0, 0, 0, 0.5 )';
Ctx. fillRect (0, 0, ctx. canvas. width, ctx. canvas. height );
// Draw selection
SelectObj. draw ();
Canvas. mousedown (canvasMouseDown );
Canvas. on ("touchstart", canvasMouseDown );
};
Var createSelection = function (x, y, width, height ){
Var content = $ ("# imagePreview ");
X = x | Math. ceil (content. width ()-width)/2 );
Y = y | Math. ceil (content. height ()-height)/2 );
Return new Selection (x, y, width, height );
};
Var ctx = canvas [0]. getContext ("2d ");
Var iMouseX = 1;
Var iMouseY = 1;
Var image = new Image ();
Image. onload = function (){
SelectObj = createSelection (x, y, width, height );
Canvas. data ("select ",{
X: selectObj. x,
Y: selectObj. y,
W: selectObj. w,
H: selectObj. h
});
DrawScene ();
};
Image. src = imageSource;
Canvas. mousemove (canvasMouseMove );
Canvas. on ("touchmove", canvasMouseMove );
Var StopSelect = function (e ){
Var canvasOffset = $ (canvas). offset ();
Var pageX = e. pageX | event.tar getTouches [0]. pageX;
Var pageY = e. pageY | event.tar getTouches [0]. pageY;
IMouseX = Math. floor (pageX-canvasOffset. left );
IMouseY = Math. floor (pageY-canvasOffset. top );
SelectObj. px = iMouseX-selectObj. x;
SelectObj. py = iMouseY-selectObj. y;
If (selectObj. bHow [0]) {
SelectObj. px = iMouseX-selectObj. x;
SelectObj. py = iMouseY-selectObj. y;
}
If (selectObj. bHow [1]) {
SelectObj. px = iMouseX-selectObj. x-selectObj. w;
SelectObj. py = iMouseY-selectObj. y;
}
If (selectObj. bHow [2]) {
SelectObj. px = iMouseX-selectObj. x-selectObj. w;
SelectObj. py = iMouseY-selectObj. y-selectObj. h;
}
If (selectObj. bHow [3]) {
SelectObj. px = iMouseX-selectObj. x;
SelectObj. py = iMouseY-selectObj. y-selectObj. h;
}
If (iMouseX> selectObj. x + selectObj. csizeh &&
IMouseX <selectObj. x + selectObj. w-selectObj. csizeh &&
IMouseY> selectObj. y + selectObj. csizeh &&
IMouseY <selectObj. y + selectObj. h-selectObj. csizeh ){
SelectObj. bDragAll = true;
}
For (var I = 0; I <4; I ++ ){
If (selectObj. bHow [I]) {
SelectObj. bDrag [I] = true;
}
}
};
Canvas. mouseout (canvasMouseOut );
Canvas. mouseup (canvasMouseUp );
Canvas. on ("touchend", canvasMouseUp );
This. getImageData = function (previewID ){
Var tmpCanvas = $ (" ") [0];
Var tmpCtx = tmpCanvas. getContext ("2d ");
If (tmpCanvas & selectObj ){
TmpCanvas. width = selectObj. w;
TmpCanvas. height = selectObj. h;
TmpCtx. drawImage (image, selectObj. x, selectObj. y, selectObj. w, selectObj. h, 0, 0, selectObj. w, selectObj. h );
If (document. getElementById (previewID )){
Document. getElementById (previewID). src = tmpCanvas. toDataURL ();
Document. getElementById (previewID). style. border = "1px solid # ccc ";
}
Return tmpCanvas. toDataURL ();
}
};
}
Function autoResizeImage (maxWidth, maxHeight, objImg ){
Var img = new Image ();
Img. src = objImg. src;
Var hRatio;
Var wRatio;
Var ratio = 1;
Var w = objImg. width;
Var h = objImg. height;
WRatio = maxWidth/w;
HRatio = maxHeight/h;
If (w <maxWidth & h <maxHeight ){
Return;
}
If (maxWidth = 0 & maxHeight = 0 ){
Ratio = 1;
} Else if (maxWidth = 0 ){
If (hRatio <1 ){
Ratio = hRatio;
}
} Else if (maxHeight = 0 ){
If (wRatio <1 ){
Ratio = wRatio;
}
} Else if (wRatio <1 | hRatio <1 ){
Ratio = (wRatio <= hRatio? WRatio: hRatio );
} Else {
Ratio = (wRatio <= hRatio? WRatio: hRatio)-Math. floor (wRatio <= hRatio? WRatio: hRatio );
}
If (ratio <1 ){
If (ratio <0.5 & w <maxWidth & h <maxHeight ){
Ratio = 1-ratio;
}
W = w * ratio;
H = h * ratio;
}
ObjImg. height = h;
ObjImg. width = w;
}

I hope you will like it. If you have any questions, leave a message for me.