An image clipping code based on the jquery mobile device. This is a jquery picture clipping plugin jquery.photoclip that supports touch gestures on mobile devices. As follows:
Online preview Source Download
The implemented code.
HTML code:
<articleclass= "Zzsc-container"> <DivID= "Cliparea"></Div> <inputtype= "File"ID= "File"> <ButtonID= "Clipbtn">Intercept</Button> <DivID= "View"></Div> </article> <Scriptsrc= "Js/jquery-2.1.1.min.js"type= "Text/javascript"></Script> <Scriptsrc= "Js/iscroll-zoom.js"></Script> <Scriptsrc= "Js/hammer.js"></Script> <Scriptsrc= "Js/jquery.photoclip.js"></Script> <Script> //document.addeventlistener (' Touchmove ', function (e) {E.preventdefault ();}, false); $("#clipArea"). Photoclip ({width: $, Height: $, File:"#file", view:"#view", OK:"#clipBtn", Loadstart:function() {Console.log ("in photo reading"); }, LoadComplete:function() {Console.log ("Photo reading Complete"); }, Clipfinish:function(Dataurl) {console.log (Dataurl); } }); </Script>
Via:http://www.w2bc.com/article/jquery-mobile-cut-head-image
Clip code based on jquery mobile device picture