Web-side upload image, intercept document photo

1.html

<div class= "Ycupload-mainbox" ><div class= "Ycuplod_area" ontouchstart= "" ><div class= "Cover-wrap" > <div class= "Bomb_box" ><div id= "Cliparea" class= "Cliparea" ></div><div class= "Img_con" >< Div class= "Clip_btn_tip" > Scrolling mouse Zoom out picture </div><button id= "clipbtn" class= "clipbtn" > Save photo </button> </div></div></div><div class= "Img_center_area" ><div id= "view_img" class= "Img_view" title= "Please upload 128*150 cover picture" >aaa</div><input type= "file" class= "file_photo_img" id= "file_img" ></div ></div></div><script src= ". /.. /.. /.. /assets/admin/upload_img/iscroll-zoom.js "type=" Text/javascript "charset=" Utf-8 "></script><script src =".. /.. /.. /.. /assets/admin/upload_img/hammer.js "type=" Text/javascript "charset=" Utf-8 "></script><script src=". /.. /.. /.. /assets/admin/upload_img/lrz.all.bundle.js "type=" Text/javascript "charset=" Utf-8 "></script><script Src= ". /.. /.. /.. /asseTs/admin/upload_img/jquery.photoclip.min.js "type=" Text/javascript "charset=" Utf-8 "></script>    

2,js

var cliparea = new BJJ. Photoclip ("#clipArea", {size: [192, 225],//an array of width and height of the Intercept box. The default value is [260,260]outputsize: [128, 150],//An array of the width and height of the output image. The default value is [0,0], which indicates the original size of the output image//outputtype: "JPG",//Specify the type of output picture, optional "JPG" and "PNG" two types, the default is "JPG" File: "#file_img",//upload the picture <inpu T type= "file" > Control selector or DOM object view: "#view_img",//The selector or DOM object showing the container of the captured image OK: "#clipBtn",//Confirm button selector or DOM object Loadstart: function () {//start loading the callback functions. This points to the FileReader object and passes the file object being loaded as a parameter to $ ('. Cover-wrap '). FadeIn (); Console.log ("Photo-reading");},loadcomplete:function () {//load the completed callback function. This points to the picture object and passes the picture address as an argument to Console.log ("photo read complete"),},//loaderror:function (event) {},//load failed callback function. This points to the FileReader object and passes the event object of the error events as a parameter to the Clipfinish:function (Dataurl) {//clipping completed callback function. This points to the picture object, dataurl the cropped image data to $ ('. Cover-wrap ') as a parameter. FadeOut (); $ (' #view '). CSS (' background-size ', ' 100% 100% '); Console.log (Dataurl);}});

3.css

/* Upload documents according to Action*/div.container{padding-left:0;padding-right:0;} div.row{margin-left:0;margin-right:0;}. padding0{padding-left:0;padding-right:0;}. bomb_box{width:350px;height:450px;margin:100px auto;background-color: #FFFFFF; overflow:hidden;border-radius:4px;}. cliparea{height:350px;}. img_con{height:56px;line-height:36px;text-align:center;padding-top:8px;}. Ycuplod_area{min-height:1px;line-height:160px;text-align:center;position:relative;}. Cover-wrap{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba (0, 0, 0, 0.4); Z-index: 10000000;text-align:center;}. Img_center_area{width:128px;height:150px;border-radius:4px;background:url (.. /img/lay_img.png); Margin-left:19px;color: #FFFFFF; Font-size:14px;text-align:center;line-height:32px;outline: None;position:relative;}. img_view{width:128px;height:150px;}. Clip_btn_tip{width:100%;text-align:center;font-size:14px;color: #aaa;}. Clipbtn{width:100px;height:32px;border-radius:4px;background-color: #3387c9; color: #FFFFff;font-size:14px;text-align:center;line-height:32px;outline:none;border:1px solid #3387c9;}. File_photo_img{cursor:pointer;opacity:0;filter:alpha (opacity=0); width:100%;height:100%;p osition:absolute;top:0 ; left:0;} /* Upload Document Photo end*/

　　

Web-side upload image, intercept document photo