Izinkan saya menunjukkan kepada Anda rendering terlebih dahulu:
Kode halaman
UUID pengguna ditulis dalam tes mati
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE><html lang="en"><head><title>User avatar cropping</title><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><link rel = "stylesheet" href = "sumber daya/jcrop/css/jquery.jcrop.css"> <tautan rel = "stylesheet" href = "sumber daya/css/photo.css"> <script src = "sumber daya/js/jquery.min.js"> </script> skrip> SRC = "Sumber Daya/Jcrop/JS/JQuery.jcrop.js"> </script> <script src = "sumber daya/js/ajaxfileupload.js"> </script> <body> <div> <v div> <v> <h1> avatar cropping </h1> </Div> <v> <h1> avatar cropping </h1> </Div> <v> Sumber id = "target"/> <div id = "preview-pane"> <div> <img src = "sumber daya/img/test.jpg"/> </div> <div style = 'float: left; display: inline;'> <a class = 'btn_addpic' href = "Javascript: void (0);"> </iji </eMage </emref = "JavaScript: void (0);"> </span> </eMage </EMIP = "JAVASCRIPS: VOID (0);"> </Onput> </EMIP = "EMIP =" JAVASCRIPS: VOID (0); "> </emput> </EMIP =" EMIP = "EMACK: VOID (0);" id = "unggah_image" type = "file" name = "unggah" terima = "gambar/*" class = "filePrew"/> </a> </div> <div style = 'float: right; display: inline;'> <a class = 'btn_addpic' href = "JavaScript: void (0);" OnClick = 'kirim ()'> <span> kirim </span> </a> </div> </div> </div> </div> </div> </div> </body> <script type = "text/javaScript"> var global_api = ""; var boundx = ""; // page weldth var var global_api = ""; (in this scope) to hold the API and image size//create variables (in this scope) API and image size var jcrop_api,// Grab some information about the preview pane//get some information preview pane $preview = $('#preview-pane'),$pcnt = $('#preview-pane .preview-container'),$pimg = $('#preview-pane .preview-container img'),xsize = $pcnt.width(),ysize = $pcnt.height();$('#target').Jcrop({onChange: updatePreview,onSelect: updatePreview,aspectRatio: xsize / ysize},function(){// Use the API to get the real image size//Use the API to get the real image size var bounds = this.getbounds (); boundx = bounds [0]; boundy = bounds [1]; // Simpan API di variabel jcrop_api // penyimpanan apijcrop_api = this; // pindahkan pratinjau ke dalam wadah jcrop untuk penentuan posisi css // preview masukkan wadah jcrop container jcrop positioning css $ preview.Appendto (jcrop_api.ui.holder);}); function updatePreview (c) {if (parseInt (cw)> 0) global_api = c; {var rx = xsize / cw; var ry = ysize / ch; $ pimg.css ({width: math.round = ysize / ch; $ pimg.css ({width: math.ry * boundy) + 'px',marginLeft: '-' + Math.round(rx * cx) + 'px',marginTop: '-' + Math.round(ry * cy) + 'px'});}};//===================$('#upload_image').change(function(event) {// Get the HTML5 JS Objek file sesuai dengan <Input> var file = event.target.files, file if (file && file. 0) {// file yang saat ini diunggah. urlvar imgurl = url.createObjecTurl (file); // Gunakan url ini untuk menghasilkan <img> untuk menampilkannya $ ('. Jcrop-holder img'). attr ('src', imgurl); $ ('. imgurl);}}); // =============================================== $ ("#unggah_image"). Fungsi () {tag = true;});});/// = ========= ==================================================================== ==================================================================== ==================================================================== ==================================================================== ==================================================================== ==================================================================== "") {AJAXFileUpload ();} else {alert ('Apakah Anda tidak melakukan apa-apa?');}} // fungsi unggahan file jax jaxfileupload () {$ .AjaxFileUdoad ({url: 'unggahfoto', // Alamat permintaan server yang digunakan: {{url: 'unggahpooto', // Alamat permintaan server yang digunakan: {{url: 'unggahpooto', // Alamat permintaan server-side yang digunakan: {{url: 'uploadphoto', // alamat server-side-side yang digunakan: {{url: 'unggah, // alamat server-side-side yang digunakan: {{url:' unggah // 'unggah_image', // ID atribut DataType: 'json', // Jenis nilai pengembalian umumnya disetel ke jsondata: {x: global_api.x, y: global_api.y, w: global_api.w, h: global_api.h, pw: boundx, ph: ikat, unid: '{{{{{{{{{{{{{ph: ph: ph: ph: unid' // Server berhasil merespons fungsi pemrosesan jika (data.Result) {alert ('Success');} else {alert ('Failure');} window.location.reload (); // Segarkan halaman saat ini}});} </script> </html>Kode latar belakang
@Responsebody@requestMapping ("unggahPhoto") peta publik <string, objek> unggahPhoto (@RequestParam ("upImage") multipartfile imagefile, httpservletrequest request, httpservletponse respons =) () (); peta tag> fies tag = peta {peta <string, objek> hasil = hashMap <string baru, string = new <), string = new hashMap <string =) () () (); peta tag> fies tag = new hashMap = string = new hashMap <string> request.getParameter ("unid"); string x = request.getParameter ("x"); string y = request.getParameter ("y"); string h = request.getParameter ("h"); string w = request.getParameter ("w"); // width gambar aktual dan tinggi p. getparameter. request.getParameter ("pw"); // Parameter pemotongan grafik int gambarx = integer.parseint (x); int gambarey = integer.parseint (y); int imageH = integer.parseint (h); int imagew = integer.parseint (w); int srch = integer.parseint (pheadseint (pheight); srm = srcher = integer. realPath = request.getSession (). getserVletContext (). getRealPath ("/"); string resourcePath = "sumber daya/unggah/"; coba {if (imagefile! = null) {if (fileuploadutil.allowupload (imagefile.getContentType ()) {/) {/{owiceTeTe (ImageFile. Imagecut.imgcut (imagefile.getInputStream (), imagex, imagey, imagew, imageH, srcw, srch); if (b! = Null) {// simpan ke pengguna database pengguna = Userservice.selectByprimarykey (unid); user.setphoto (b); tag = tag = (UserService.updatebyPrimaryKeyselective (user) == 1)? Tag = true: tag; result.put ("result", tag);}}}} catch (exception e) {e.printstacktrace ();} result.put ("result", tag); hasil pengembalian;}Alat pemotongan gambar
Paket com.ssm.demo.utils; impor java.awt.graphics; impor java.awt.image; gambar java.awt.toolkit; java.awt.image.bufferedImage; gambar java.awt.image.cropimagefilter; impor java.awt.awt.awt.cropimagefilter; impor java.awt.awt java.awt.image.imagefilter; import java.io.bytearrayoutputStream; import java.io.inputStream; import javax.imageo.imageio; kelas publik imagecut {/*** intersepsi** @param srcimagefile* alamat gambar asli* @param x* xpepcept* @param srcimageFile* alamat gambar asli* @param x* xpepcept* @param srcimageFile* alamat gambar asli* @param x* xpepcept* @param srcimageFile* alamat gambar asli* @param x* xpepcept *pepepcept *pepcept *pepcept* Coordepcepe* Coordepcept* CoordePEnes* Koordines* Koordin Y y Deswidth* Lebar yang Dicegur* @param desheight* Tinggi yang dicegat* @param srcwidth* Lebar gambar halaman* @param srcheight* Tinggi gambar halaman**/public static byte [] Imgcut (inputStream input, int x, int y, int deswidth, int desheight, int srceDTH, int x, int y, int deswidth, int desheight, int srceDTH, int x, int y, int deseDidth, int desheight, int srceDTH, int x, int y, int deseDidth, int desheight, int srceDTH, int x, int y, int deseDidth, int desheight, int srceDTH, int x, int y, int deseDidth, int desheight, int srceDTH, SRCE, img; imagefilter cropFilter; bufferedImage bi = imageo.read (input); if (srcwidth> = deswidth && srcheight> = desheight) {gambar gambar = bi.getscaledInstance (srcwidth, srcheight, image.scale_default); cropfault (srcwidth, srcheight, Image.scale_default); cropfault (srcwidth, srcheight, Image.scale_default); CHROPSHERTH, SRCHEIGH desHeight);img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));BufferedImage tag = new BufferedImage(desWidth, desHeight, BufferedImage.TYPE_INT_RGB);Graphics g = tag.getGraphics();g.drawImage(img, 0, 0, null); g.dispose (); // output file bytearrayoutputStream out = new bytearrayoutputStream (); imageIo.write (tag, "jpeg", out); return out.tobyteArray ();}}}} {exectrion e) {e.printstacktack ();Di atas adalah kode contoh untuk mengunggah JCROP+AJAXUPLOAD gambar pemotongan dan pengunggahan yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!