HTML5 canvas allows you to drag and drop an Avatar on a mobile terminal to crop the image. html5canvas
In this example, HTML5 canvas is used to write the cropping effect of the uploaded avatar. You can drag and drop the uploaded avatar to crop it. Although the style is not easy to see, the function is still complete:
For the effect after cropping:
Html section:
Copy XML/HTML Code to clipboard
- <! DOCTYPE html>
- <Html lang = "en">
- <Head>
- <Meta charset = "UTF-8">
- <Title> upload an avatar </title>
- <Meta name = "renderer" content = "webkit">
- <Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
- </Head>
- <Body>
- <Div id = "imgCrop" style = "width: 200px; height: 200px; border: 1px solid # ccc; overflow: hidden;">
- </Div>
- <Input type = "file" accept = "image/*"/>
- <Button id = "save"> save </button>
- <P> The following is the cut image: </p>
- <Div id = "imgShow"> </div>
- </Body>
- </Html>
JavaScript section:
Copy the content to the clipboard using JavaScript Code
- Var $ imgCrop = $ ("# imgCrop ");
- Var $ img = $ imgCrop. find ("img ");
- Var img = $ img [0];
- Var width = parseInt($imgCrop.css ("width "));
- Var height = parseInt($imgCrop.css ("height "));
- Var startX, startY, scale = 1;
- Var x = 0, y = 0;
- $ ("Input"). on ("change", function (){
- Var fr = new FileReader ();
- Var file = this. files [0]
- // Console. log (file );
- If (! /Image \/\ w +/. test (file. type )){
- Alert (file. name + "is not an image file! ");
- Return;
- }
- Console. log (file );
- $ Img. removeAttr ("height width ");
- Fr. readAsDataURL (file );
- Fr. onload = function (){
- Img. src = fr. result;
- Var widthInit = img. width;
- If (img. width> img. height ){
- Img. height = height;
- X = (width-img. width)/2;
- Y = 0;
- } Else {
- Img. width = width;
- X = 0;
- Y = (height-img. height)/2;
- }
- Scale = widthInit/img. width;
- Move ($ img, x, y );
- };
- });
- Img. addEventListener ("touchstart", function (e ){
- StartX = e.tar getTouches [0]. pageX;
- StartY = e.tar getTouches [0]. pageY;
- Return;
- });
- Img. addEventListener ("touchmove", function (e ){
- E. preventDefault ();
- E. stopPropagation ();
- Var changeX = e. changedTouches [0]. pageX-startX + x;
- Var changeY = e. changedTouches [0]. pageY-startY + y;
- Move ($ (this), changeX, changeY );
- Return;
- });
- Img. addEventListener ("touchend", function (e ){
- Var changeX = e. changedTouches [0]. pageX-startX + x;
- Var changeY = e. changedTouches [0]. pageY-startY + y;
- X = x + e. changedTouches [0]. pageX-startX;
- Y = y + e. changedTouches [0]. pageY-startY;
- Move ($ (this), changeX, changeY );
- Return;
- });
- // Determine the target image Style
- Function move (ele, x, y ){
- Ele.css ({
- '-Webkit-transform': 'translate3d ('+ x + 'px,' + y + 'px, 0 )',
- 'Transform': 'translate3d ('+ x + 'px,' + y + 'px, 0 )'
- });
- }
- $ ("# Save"). on ("click", function (){
- Var url = imageData ($ img );
- Console. log (url );
- $ ("# ImgShow" cmd.html (" ");;
- });
- // Crop an image
- Function imageData ($ img ){
- Var canvas = document. createElement ('canvas ');
- Var ctx = canvas. getContext ('2d ');
- Canvas. width = width;
- Canvas. height = height;
- Ctx. drawImage (img,-x * scale,-y * scale, width * scale, height * scale, 0, 0, width, height );
- Return canvas. toDataURL ();
- }
The above is all the content of this article, hoping to help you learn.
Original article: http://www.cnblogs.com/yifengBlog/p/5265598.html
