Canvas plotting of HTML5-image processing tutorial

ArticleDirectory

• The following is the source code of a specific cropping method:
• After:

Canvas is a powerful canvas that allows you to write. Of course, it also supports image processing.

Drawimage (image, dx, Dy );// Used for display, sometimes exceeding

Drawimage (image, dx, Dy, DW, DH );// Used for scaling

Drawimage (image, Sx, Sy, SW, sh, dx, Dy, DW, SH );// Used for cropping, scaling, and display

Note: image is an image object. dx is the X coordinate in the canvas, Dy is the Y coordinate in 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, and sh are the X, Y, width, and height values in the original image respectively (I'm lazy, just write it ).

The following is a method for tailoring. Source code :

 <!  Doctype html  > <  Html  >   <  Head  >      <  Meta  Charset  = "UTF-8"  >      <  Title  > Canvas </  Title  >  </  Head  >   <  Style  Type  = "Text/CSS"  >  Body  {  Margin  :  20px auto  ; Padding  :  0  ;  Width  :  800px  ;   }  Canvas  {  Border :  Dashed 2px # ccc  }   </  Style  >   <  Script  Type  = "Text/JavaScript"  >      Function  $ (ID ){  Return Document. getelementbyid (ID );}  Function  Pageload (){  VaR  Can  =  $ (  '  Can  '  ); VaR  Cans  =  Can. getcontext (  '  2d  '  );  VaR  Objimg  =   New Image (); objimg. SRC  =   '  Lin.jpg  '  ; Objimg. onload  =   Function  () {Cans. drawimage (objimg,  500  , 400  ,  500  ,  400  ,  100  ,  100  ,  500  , 400  );}}  </  Script  >  <  Body  Onload  = "Pageload ();"  >      <  Canvas  ID  = "Can"  Width  = "800px" Height  = "600px"  Onclick  = "Img_click (this );"  > </  Canvas  >  </  Body  >  </  Html  > 

Original Image -- A pretty girl, hahaha

After:

 

If you have any questions, refer to: http://www.aqee.net/html-5-canvas-tutorial-displaying-images/