Image uploading and cropping, bitmapcutter component usage

The picture was uploaded in the previous blog post.

This is mainly the implementation of the cropping, need to use the Bitmapcutter component.

Jquery.bitmapcutter The plugin was developed by Jericho and its main function is client-side cropping.

Introducing the jquery Library

<script language= "javascript" type= "Text/javascript" src= "/js/jquery1.4.2.min.js" ></script>

Introducing the Jquery.bitmapcutter library and its related styles

Directly on the code:

Js

    Uploadokheadphoto:function (file, response) {        response = $.parsejson (response);        if (!response. issuccess) return;        if (typeof (response. Data) = = "string") {            $ ("#target"). attr ("src", response. Data + "? _t=" + math.random ());        }        else if (response. Data.length = = 1) {            $ ("#target"). attr ("src", response. Data[0] + "? _t=" + math.random ());        } else {            var urlimg;            var filename;            if (response. Data.length > 1) {                urlimg = response. Data[0].replace ("\" "," "). Replace (" \ "", "");                filename = urlimg.substring (Urlimg.lastindexof ("/") + 1);                Jcropimg.open (urlimg + "? _t=" + math.random (), urlimg, Response. DATA[1]);}}    ,

Post-upload callback function, open clipping function:

Crop the picture var jcropimg = {    FileURL: "",    fileposition: ",    Iscut:false,    open:function (Imgurl, FileURL, fileposition) {        jcropimg.fileurl = FileURL;        Jcropimg.fileposition = fileposition;        Jcropimg.iscut = false;        var dialog; dialogID = ' dlgw_dialog_jcropimg ';        var buttons = beehunt.getdefaultbuttons ();        Buttons[0].text = ' OK ';        Buttons[0].handler = function () {            $ ("#uploadPicture"). attr ("src", FileURL + "? t=" + math.random ());            $ ("#hidPicturePath"). Val (jcropimg.fileposition);            $ ("#hidPictureUrl"). Val (jcropimg.fileurl);            This.close ();        };        Dialog = Beehunt.dialog ({id:dialogid, url: '/dialog/jcropimg?islogo=1&dialogid= ' + dialogid + ' &imgurl= ' + Imgur L + ' &fileurl= ' + fileurl, title: ' Clipping ', Width: ' + ', Height: ' + ', buttons:buttons, grid: '}};    

Eject crop dialog, such as:

HTML code:

<!---crop picture frame--><form id= "Frmjcropimg_dialog" method= "POST" >    <table style= "width:100%;" >        <tr>            <td>                <div class= "Img-container" style= "text-align:center;min-width:300px;" >                                    </div>                <div id= "container" ></div >                <div id= "Div_preview" style= "Display:none;text-align:center;vertical-align:middle;" >                    <br/>                    <p style= "margin:0px;" > After cropping as follows </p>                    <br/>                                        <br                /><br/> </div >            </td>        </tr>    </table></form>

Make sure that you have a container in your Web page that is loaded with the plugin

<div id= "Container" ></div>

HTML loaded with the completed JS code:

@* Define Check button onpageload Execute script *@//photo cropping code//src: The path of the original large map//width: Target width//height: Target high//newsrc: After the cut, the element used to display the small picture id  @section        onpageload{<script type= "Text/javascript" > $ (Function () {$ ("#jcropimg"). attr ("src", ' @req_imgUrl ');        $ ("#container"). html (');        $ ("#jcropimg"). attr ("src", ""). Hide ();            var w = max, h = 150;//shear var pw = ' 200px ', ph = ' 270px ', phh = ' 235px ';//Window $.fn.bitmapcutter ({ SRC: ' @req_fileUrl ', Requesturl: '/api/scissors.axd ', Renderto: $ ("#container"), cutter Size: {width:w, height:h}, Ongenerated:function (NEWSRC) {//After you have finished and saved, return the saved picture address $ ("#preview").                attr ("src", Newsrc + "? t=" + math.random ()). Show ();                $ ("#div_preview"). Show ();                $ ("#container"). Hide ();                $ (". Jquery-bitmapcutter-newimg"). Hide ();                var dialog = $ (top.window.document). Find ("# @req_dialogId"). EQ (0); Dialog.css ({"width": "", "height": ph});                Dialog.find (". Dialog-content"). CSS ({"width": "", "Height": phh});                Dialog.parent (). Next (). css ({"width": pw, "height": ph});                Dialog.parent (). Next (). Remove ();                Dialog.parent (). Next (). Remove ();            Dialog.parent (). remove ();    }, rotateangle:90});    }); </script>}

Note that in this plugin click "Start Trimming", it will be cut before uploading, and then back to the small map of SRC, here is involved in the docking plug-in, the plug-in called Bitmapcutter.core, which is written by an engineer in China, of course, if you feel uncomfortable, You can also define your own upload plugin, but I would like to remind you that the cost of rewriting the code is worth it.

Please note that on line No. 423 of Jquery.bitmapcutter.js

$.get (' Scissors.axd ', {...

This gives the path of the upload, which needs to be mapped in Web. config:

Map processing in Web. config system.web section:

<system.web>
<add path= "Scissors.axd" verb= "*" type= "Bitmapcutter.core.httphandler.bitmapscissors,bitmapcutter.core" Validate= "false"/>

httphandlers element Description

To do this, we need to do the following:

1. Refer to BitmapCutter.Core.dll in your project

2. Modify the system.web section in Web. config

All right, all the work is almost done.

Reference blog:

Great Online Drawing Tool jQuery1.4.2 + Jquery.bitmapcutter.js + bitmapcutter.core+ Perfect fit

Jquery.bitmapcutter (picture clipping plugin) mates with jquery1.4.2

Image uploading and cropping, bitmapcutter component usage