Crop an html5 uploaded Avatar and an html5 Avatar

Crop an html5 uploaded Avatar and an html5 Avatar

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:

<! DOCTYPE html> 
JavaScript section:
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); // console. log (file. size); 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;} console. log (img. width); console. log (widthInit); scale = widthInit/img. width; console. log (scale); 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 style function move (ele, x, y) of the Target Image) {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 the 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 ();}