This article mainly introduces the jquery plug-in jcrop+fileapi perfect picture upload + cropping + Preview code, very simple and practical, the effect is also very good, the need for small partners can refer to.
Web page to crop pictures, do not need to go through the server.
This is accomplished with the Https://github.com/mailru/FileAPI framework. cooperate with Jcrop.
Advanced browsers use canvas cropping, IE6 7 8 use flash over.
Core code:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45, 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | var el = $ (' input '). Get (0); seajs.use ([' Gallery/jcrop/0.9.12/jcrop.css ', ' Gallery/jcrop/0.9.12/jcrop.js '], function () { FileAPI.event.on (el, ' Change ', function (evt) {var files = Fileapi.getfiles (EVT); Retrieve file list fileapi.filterfiles (files, function (file, info) {if (!/^image/.test (File.type)) {alert (' picture lattice Incorrect type "); return false; else if (file.size > * fileapi.mb) {alert (' picture must be less than 20M '); return false;} else{return true;} }, function (fi Les, rejected) {console.log (files); if (files.length) {var file = Files[0]; var img0 = fileapi.image (file); Var im G1 = fileapi.image (file); var ratio = 0; Fileapi.getinfo (file, function (err, info) {//get image ratio if (!err) {if (Info.width > Info.height) {ratio = info . width/500; else {ratio = info.height/500;}} }); Img0.resize (+, ' max ')//place image and register Jcrop. Get (Function (Err, IMG) {$ (' #img2 '). empty (); $ (' #img 2 '). Append ($ (IMG)); $ (' #img2 '). Children (). Jcrop ({aspectratio:1, bgcolor: ' Rgba (0,0,0,0.4) ', Onselect:function (c) {img1.matrix.sx = c.x * ratio; img1.matrix.sy = C.Y * ratio; IMG1.MATRIX.SW = C.W * ratio; img1.matrix.sh = c.h * ratio; IMG1.MATRIX.DW = 500; IMG1.MATRIX.DH = 500; Img1.get (function (Err, IMG) {//$ (' #img3 '). empty ();//$ (' #img3 '). Append ($ (IMG)); $ (' #img3 '); HTML ($ (IMG));}); }); }); $ (' #btn '). On (' click ', Function () {fileapi.upload {//url: '/testupfile/upfile ',//headers: {' Content-type ': ' Multipart/form-data '}, files: {images:img1}, Progress:function (EVT) {/* ... */}, Complete:function (err, XHR) {/* ... * *//alert (Xhr.responsetext); Console.log (XHR); } }); }); } }); }); }); |
Complete code:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 | <! DOCTYPE html> <html> <head> <title>todo supply a title</title> <meta charset= "UTF-8" > & Lt;meta name= "viewport" content= "Width=device-width" > <script src= "/jquery.min.js" ></script> < Script src= "./jcrop/jquery. Jcrop.min.js "></script> <link href="./jcrop/jquery. Jcrop.min.css "rel=" stylesheet "> </head> <style> . upload-btn {width:130px; height:25px; overflow : Hidden; position:relative; BORDER:3PX solid #06c; border-radius:5px; Background: #0cf; }. upload-btn:hover {background: #09f;} upload-btn__txt {z-index:1; position:relative; color: #fff; font-size : 18px; font-family: "Helvetica neue"; line-height:24px; Text-align:center; text-shadow:0 1px 1px #000; }. UPLOAD-BTN input {top: -10px, right: -40px; z-index:2; position:absolute; cursor:pointer; opacity:0; filter:alpha (opacity=0); font-size:50px; } </style> <body> <div> <!--"Js-fiLeapi-wrapper "--Required class--> <div class=" Js-fileapi-wrapper upload-btn "id=" choose "> <input NA Me= "Files" type= "file" multiple/> <button id= "btn" > Upload </button> </div> <div id= "Images" > & nbsp <p style= "margin-top:40px;" ></p> <div id= "Img2" ></div> <div id= "IMG3" ></div> </div> & Lt;/div> <script>window. Fileapi = {staticpath: './fileapi/'};</script> <script src= './fileapi/fileapi.min.js ' ></script> <script> var el = $ (' input '). Get (0); FileAPI.event.on (el, ' Change ', function (evt) {var files = fileapi.getfiles (evt);//Retrieve file list &nbs P Fileapi.filterfiles (Files, function (file, info) {if (!/^image/.test (File.type)) {alert (' incorrect picture format '); return false;} else if (file.size > * fileapi.mb) {alert (' picture must be less than 20M '); return false;} else{return true;} }, function (Files, r ejected) { if (files.length) {var file = Files[0]; var img0 = fileapi.image (file); var img1 = fileapi.image (file); var ratio = 0; Fileapi.getinfo (file, function (err, info) {//get image ratio if (!err) {if (Info.width > Info.height) {ratio = info . width/500; else {ratio = info.height/500;}} }); Img0.resize (+, ' max ')//place image and register Jcrop. Get (Function (Err, IMG) {$ (' #img2 '). empty (); $ (' #img 2 '). Append ($ (IMG)); $ (' #img2 '). Children (). Jcrop ({aspectratio:1, bgcolor: ' Rgba (0,0,0,0.4) ', Onselect:function (c) {img1.matrix.sx = c.x * ratio; img1.matrix.sy = C.Y * ratio; IMG1.MATRIX.SW = C.W * ratio; img1.matrix.sh = c.h * ratio; IMG1.MATRIX.DW = 500; IMG1.MATRIX.DH = 500; Img1.get (function (Err, IMG) {//$ (' #img3 '). empty ();//$ (' #img3 '). Append ($ (IMG)); $ (' #img3 '); HTML ($ (IMG));}); }); }); $ (' #btn '). On (' click ', Function () {fileapi.upload ({url: '/testupfile/upfile ', files: {IMAGES:IMG1}, Progress:fu Nction (EVT) {/* ... */}, Complete:funCtion (Err, XHR) {//*///alert (xhr.responsetext); }); }); }); }); </script> </body> </html> |
The above is the entire contents of this article, I hope you can enjoy.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
