"One canvas a day" image processing tutorials (12)

Canvas is a very powerful canvas for you to write, and of course, he also supports the function of image processing.

DrawImage (Image,dx,dy);//for display, sometimes exceeding

DrawImage (IMAGE,DX,DY,DW,DH);//For zooming

DrawImage (IMAGE,SX,SY,SW,SH,DX,DY,DW,SH);//For cropping, zooming, displaying

Note: Image is a picture object, DX is the x-coordinate of the canvas, DY is the y-coordinate of the canvas, DW is the width of the image in the canvas, dy is the height of the image in the canvas, Sx,sy,sw,sh is the x, y, width, height (I am lazy, slightly write) in the original image.

The following is a given method of clipping the source code:

<! DOCTYPE html>
Original image--a beauty, hahaha
After display:
If you have questions, refer to: http://www.aqee.net/html-5-canvas-tutorial-displaying-images/
"One canvas a day" image processing tutorials (12)