JAVA切割图片

flycomos.lee

浏览: 280594 次
性别:
来自: 北京

最近访客更多访客>>

agustins

nick_jian

月影穹苍

追求幸福

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Java UP IE prototype 360

1.protected void processRequest(HttpServletRequest request,
2.
3.HttpServletResponse response) throws ServletException, IOException {
4.
5.String Pic = (String) request.getParameter("p");
6.
7.int PointX = Integer.parseInt(request.getParameter("x"));
8.
9.int PointY = Integer.parseInt(request.getParameter("y"));
10.
11.int CutWidth = Integer.parseInt(request.getParameter("w"));
12.
13.int CutHeight = Integer.parseInt(request.getParameter("h"));
14.
15.// 图片宽度
16.
17.int PicWidth = Integer.parseInt(request.getParameter("pw"));
18.
19.// 图片高度
20.
21.int PicHeight = Integer.parseInt(request.getParameter("ph"));
22.
23.response.setContentType("image/jpeg");
24.
25.response.setHeader("Pragma", "No-cache");
26.
27.response.setHeader("Cache-Control", "no-cache");
28.
29.response.setDateHeader("Expires", 0);
30.
31.HttpSession session = request.getSession();
32.
33.String picPath = Pic;
34.
35.String path = request.getRealPath(picPath);
36.
37.ServletOutputStream responseOutputStream = response.getOutputStream();
38.
39.cut(path, responseOutputStream, CutWidth, CutHeight, PointX, PointY,
40.
41.PicWidth, PicHeight);
42.
43.// 以下关闭输入流！
44.
45.responseOutputStream.flush();
46.
47.responseOutputStream.close();
48.
49.}
50.
51./**
52.
53.* 图片切割
54.
55.* @param srcImageFile 图片地址
56.
57.* @param responseOutputStream servlet输出流
58.
59.* @param w 切割宽度
60.
61.* @param h 切割高度
62.
63.* @param x1 开始x结点（left）
64.
65.* @param y1 开始y结点（top）
66.
67.* @param sw 图片宽度
68.
69.* @param sh 图片高度
70.
71.*/
72.
73.public void cut(String srcImageFile,ServletOutputStream responseOutputStream, int w, int h, int x1,
74.
75.int y1, int sw, int sh) {
76.
77.try {
78.
79.// http://localhost:8080/ImpCra/createServlet?p=Sunset.jpg&x=117&y=201&w=61&h=50&pw=300&ph=400
80.
81.Image img;
82.
83.ImageFilter cropFilter;
84.
85.// 读取源图像
86.
87.BufferedImage bi = ImageIO.read(new File(srcImageFile));
88.
89.if (sw >= w && sh >= h) {
90.
91.Image image = bi.getScaledInstance(sw, sh, Image.SCALE_DEFAULT);
92.
93.// 剪切起始坐标点
94.
95.int x = x1;
96.
97.int y = y1;
98.
99.int destWidth = w; // 切片宽度
100.
101.int destHeight = h; // 切片高度
102.
103.// 图片比例
104.
105.double pw = sw;
106.
107.double ph = sh;
108.
109.double m = (double) sw / pw;
110.
111.double n = (double) sh / ph;
112.
113.int wth = (int) (destWidth * m);
114.
115.int hth = (int) (destHeight * n);
116.
117.int xx = (int) (x * m);
118.
119.int yy = (int) (y * n);
120.
121.// 四个参数分别为图像起点坐标和宽高
122.
123.// 即: CropImageFilter(int x,int y,int width,int height)
124.
125.cropFilter = new CropImageFilter(xx, yy, wth, hth);
126.
127.img = Toolkit.getDefaultToolkit().createImage(
128.
129.new FilteredImageSource(image.getSource(), cropFilter));
130.
131.BufferedImage tag = new BufferedImage(w, h,
132.
133.BufferedImage.TYPE_INT_RGB);
134.
135.Graphics g = tag.getGraphics();
136.
137.g.drawImage(img, 0, 0, null); // 绘制缩小后的图
138.
139.g.dispose();
140.
141.// 输出为文件
142.
143.ImageIO.write(tag, "JPEG", responseOutputStream);
144.
145.}
146.
147.} catch (Exception e) {
148.
149.e.printStackTrace();
150.
151.}
152.
153.}
154.
155.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
156.
157.<html xmlns="http://www.w3.org/1999/xhtml">
158.
159.<head>
160.
161.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
162.
163.<title>JavaScript 图片切割效果（带拖放、缩放效果） </title>
164.
165.</head>
166.
167.<body>
168.
169.<style type="text/css">
170.
171.#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absolute;background:#F00;width:5px; height:5px; z-index:500; font-size:0;}
172.
173.#dragDiv{border:1px solid #000000;}
174.
175.</style>
176.
177.<table width="100%" border="0" cellspacing="0" cellpadding="0">
178.
179. <tr>
180.
181.    <td width="50%">
182.
183.    <div id="bgDiv" style="width:400px; height:500px;">
184.
185.        <div id="dragDiv">
186.
187.          <div id="rRightDown" style="right:0; bottom:0;"> </div>
188.
189.          <div id="rLeftDown" style="left:0; bottom:0;"> </div>
190.
191.          <div id="rRightUp" style="right:0; top:0;"> </div>
192.
193.          <div id="rLeftUp" style="left:0; top:0;"> </div>
194.
195.          <div id="rRight" style="right:0; top:50%;"> </div>
196.
197.          <div id="rLeft" style="left:0; top:50%;"> </div>
198.
199.          <div id="rUp" style="top:0; left:50%;"> </div>
200.
201.          <div id="rDown" style="bottom:0;left:50%;"></div>
202.
203.        </div>
204.
205.    </div>
206.
207.    </td>
208.
209.    <td><div id="viewDiv" style="width:200px; height:200px;"> </div></td>
210.
211. </tr>
212.
213.</table>
214.
215.<script>
216.
217.var $ = function (id) {
218.
219.    return "string" == typeof id ? document.getElementById(id) : id;
220.
221.};
222.
223.var isIE = (document.all) ? true : false;
224.
225.function addEventHandler(oTarget, sEventType, fnHandler) {
226.
227.if (oTarget.addEventListener) {
228.
229.oTarget.addEventListener(sEventType, fnHandler, false);
230.
231.} else if (oTarget.attachEvent) {
232.
233.oTarget.attachEvent("on" + sEventType, fnHandler);
234.
235.} else {
236.
237.oTarget["on" + sEventType] = fnHandler;
238.
239.}
240.
241.};
242.
243.function removeEventHandler(oTarget, sEventType, fnHandler) {
244.
245.    if (oTarget.removeEventListener) {
246.
247.        oTarget.removeEventListener(sEventType, fnHandler, false);
248.
249.    } else if (oTarget.detachEvent) {
250.
251.        oTarget.detachEvent("on" + sEventType, fnHandler);
252.
253.    } else {
254.
255.        oTarget["on" + sEventType] = null;
256.
257.    }
258.
259.};
260.
261.var Class = {
262.
263. create: function() {
264.
265.    return function() {
266.
267.      this.initialize.apply(this, arguments);
268.
269.    }
270.
271. }
272.
273.}
274.
275.Object.extend = function(destination, source) {
276.
277.    for (var property in source) {
278.
279.        destination[property] = source[property];
280.
281.    }
282.
283.    return destination;
284.
285.}
286.
287.//拖放程序
288.
289.var Drag = Class.create();
290.
291.Drag.prototype = {
292.
293. //拖放对象,触发对象
294.
295. initialize: function(obj, drag, options) {
296.
297.    var oThis = this;
298.
299.this._obj = $(obj);//拖放对象
300.
301.this.Drag = $(drag);//触发对象
302.
303.this._x = this._y = 0;//记录鼠标相对拖放对象的位置
304.
305.//事件对象(用于移除事件)
306.
307.this._fM = function(e){ oThis.Move(window.event || e); }
308.
309.this._fS = function(){ oThis.Stop(); }
310.
311.this.SetOptions(options);
312.
313.this.Limit = !!this.options.Limit;
314.
315.this.mxLeft = parseInt(this.options.mxLeft);
316.
317.this.mxRight = parseInt(this.options.mxRight);
318.
319.this.mxTop = parseInt(this.options.mxTop);
320.
321.this.mxBottom = parseInt(this.options.mxBottom);
322.
323.this.onMove = this.options.onMove;
324.
325.this._obj.style.position = "absolute";
326.
327.addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); });
328.
329. },
330.
331. //设置默认属性
332.
333. SetOptions: function(options) {
334.
335.    this.options = {//默认值
336.
337.Limit: false,//是否设置限制(为true时下面参数有用,可以是负数)
338.
339.mxLeft: 0,//左边限制
340.
341.mxRight: 0,//右边限制
342.
343.mxTop: 0,//上边限制
344.
345.mxBottom: 0,//下边限制
346.
347.onMove: function(){}//移动时执行
348.
349.    };
350.
351.    Object.extend(this.options, options || {});
352.
353. },
354.
355. //准备拖动
356.
357. Start: function(oEvent) {
358.
359.//记录鼠标相对拖放对象的位置
360.
361.this._x = oEvent.clientX - this._obj.offsetLeft;
362.
363.this._y = oEvent.clientY - this._obj.offsetTop;
364.
365.//mousemove时移动 mouseup时停止
366.
367.addEventHandler(document, "mousemove", this._fM);
368.
369.addEventHandler(document, "mouseup", this._fS);
370.
371.//使鼠标移到窗口外也能释放
372.
373.if(isIE){
374.
375.addEventHandler(this.Drag, "losecapture", this._fS);
376.
377.this.Drag.setCapture();
378.
379.}else{
380.
381.addEventHandler(window, "blur", this._fS);
382.
383.}
384.
385. },
386.
387. //拖动
388.
389. Move: function(oEvent) {
390.
391.//清除选择(ie设置捕获后默认带这个)
392.
393.window.getSelection && window.getSelection().removeAllRanges();
394.
395.//当前鼠标位置减去相对拖放对象的位置得到offset位置
396.
397.var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
398.
399.//设置范围限制
400.
401.if(this.Limit){
402.
403.//获取超出长度
404.
405.var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom;
406.
407.//这里是先设置右边下边再设置左边上边,可能会不准确
408.
409.if(iRight > 0) iLeft -= iRight;
410.
411.if(iBottom > 0) iTop -= iBottom;
412.
413.if(this.mxLeft > iLeft) iLeft = this.mxLeft;
414.
415.if(this.mxTop > iTop) iTop = this.mxTop;
416.
417.}
418.
419.//设置位置
420.
421.this._obj.style.left = iLeft + "px";
422.
423.this._obj.style.top = iTop + "px";
424.
425.//附加程序
426.
427.this.onMove();
428.
429. },
430.
431. //停止拖动
432.
433. Stop: function() {
434.
435.//移除事件
436.
437.removeEventHandler(document, "mousemove", this._fM);
438.
439.removeEventHandler(document, "mouseup", this._fS);
440.
441.if(isIE){
442.
443.removeEventHandler(this.Drag, "losecapture", this._fS);
444.
445.this.Drag.releaseCapture();
446.
447.}else{
448.
449.removeEventHandler(window, "blur", this._fS);
450.
451.}
452.
453. }
454.
455.};
456.
457.//缩放程序
458.
459.var Resize = Class.create();
460.
461.Resize.prototype = {
462.
463. //缩放对象
464.
465. initialize: function(obj, options) {
466.
467.    var oThis = this;
468.
469.this._obj = $(obj);//缩放对象
470.
471.this._right = this._down = this._left = this._up = 0;//坐标参数
472.
473.this._scale = 1;//比例参数
474.
475.this._touch = null;//当前触发对象
476.
477.//用currentStyle（ff用getComputedStyle）取得最终样式
478.
479.var _style = this._obj.currentStyle || document.defaultView.getComputedStyle(this._obj, null);
480.
481.this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth);
482.
483.this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth);
484.
485.//事件对象(用于移除事件)
486.
487.this._fR = function(e){ oThis.Resize(e); }
488.
489.this._fS = function(){ oThis.Stop(); }
490.
491.this.SetOptions(options);
492.
493.this.Limit = !!this.options.Limit;
494.
495.this.mxLeft = parseInt(this.options.mxLeft);
496.
497.this.mxRight = parseInt(this.options.mxRight);
498.
499.this.mxTop = parseInt(this.options.mxTop);
500.
501.this.mxBottom = parseInt(this.options.mxBottom);
502.
503.this.MinWidth = parseInt(this.options.MinWidth);
504.
505.this.MinHeight = parseInt(this.options.MinHeight);
506.
507.this.Scale = !!this.options.Scale;
508.
509.this.onResize = this.options.onResize;
510.
511.this._obj.style.position = "absolute";
512.
513. },
514.
515. //设置默认属性
516.
517. SetOptions: function(options) {
518.
519.    this.options = {//默认值
520.
521.Limit: false,//是否设置限制(为true时下面mx参数有用)
522.
523.mxLeft: 0,//左边限制
524.
525.mxRight: 0,//右边限制
526.
527.mxTop: 0,//上边限制
528.
529.mxBottom: 0,//下边限制
530.
531.MinWidth: 50,//最小宽度
532.
533.MinHeight: 50,//最小高度
534.
535.Scale: false,//是否按比例缩放
536.
537.onResize: function(){}//缩放时执行
538.
539.    };
540.
541.    Object.extend(this.options, options || {});
542.
543. },
544.
545. //设置触发对象
546.
547. Set: function(resize, side) {
548.
549.var oThis = this, resize = $(resize), _fun, _cursor;
550.
551.if(!resize) return;
552.
553.//根据方向设置 _fun是缩放时执行的程序 _cursor是鼠标样式
554.
555.switch (side.toLowerCase()) {
556.
557.case "up" :
558.
559._fun = function(e){ if(oThis.Scale){ oThis.scaleUpRight(e); }else{ oThis.SetUp(e); } };
560.
561._cursor = "n-resize";
562.
563.break;
564.
565.case "down" :
566.
567._fun = function(e){ if(oThis.Scale){ oThis.scaleDownRight(e); }else{ oThis.SetDown(e); } };
568.
569._cursor = "n-resize";
570.
571.break;
572.
573.case "left" :
574.
575._fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); } };
576.
577._cursor = "e-resize";
578.
579.break;
580.
581.case "right" :
582.
583._fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); } };
584.
585._cursor = "e-resize";
586.
587.break;
588.
589.case "left-up" :
590.
591._fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); oThis.SetUp(e); } };
592.
593._cursor = "nw-resize";
594.
595.break;
596.
597.case "right-up" :
598.
599._fun = function(e){ if(oThis.Scale){ oThis.scaleRightUp(e); }else{ oThis.SetRight(e); oThis.SetUp(e); } };
600.
601._cursor = "ne-resize";
602.
603.break;
604.
605.case "left-down" :
606.
607._fun = function(e){ if(oThis.Scale){ oThis.scaleLeftDown(e); }else{ oThis.SetLeft(e); oThis.SetDown(e); } };
608.
609._cursor = "ne-resize";
610.
611.break;
612.
613.case "right-down" :
614.
615.default :
616.
617._fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); oThis.SetDown(e); } };
618.
619._cursor = "nw-resize";
620.
621.}
622.
623.//设置触发对象
624.
625.resize.style.cursor = _cursor;
626.
627.addEventHandler(resize, "mousedown", function(e){ oThis._fun = _fun; oThis._touch = resize; oThis.Start(window.event || e); });
628.
629. },
630.
631. //准备缩放
632.
633. Start: function(oEvent, o) {
634.
635.//防止冒泡
636.
637.if(isIE){ oEvent.cancelBubble = true; } else { oEvent.stopPropagation(); }
638.
639.//计算样式初始值
640.
641.this.style_width = this._obj.offsetWidth;
642.
643.this.style_height = this._obj.offsetHeight;
644.
645.this.style_left = this._obj.offsetLeft;
646.
647.this.style_top = this._obj.offsetTop;
648.
649.//设置缩放比例
650.
651.if(this.Scale){ this._scale = this.style_width / this.style_height; }
652.
653.//计算当前边的对应另一条边的坐标例如右边缩放时需要左边界坐标
654.
655.this._left = oEvent.clientX - this.style_width;
656.
657.this._right = oEvent.clientX + this.style_width;
658.
659.this._up = oEvent.clientY - this.style_height;
660.
661.this._down = oEvent.clientY + this.style_height;
662.
663.//如果有范围先计算好范围内最大宽度和高度
664.
665.if(this.Limit){
666.
667.this._mxRight = this.mxRight - this._obj.offsetLeft;
668.
669.this._mxDown = this.mxBottom - this._obj.offsetTop;
670.
671.this._mxLeft = this.mxLeft + this.style_width + this._obj.offsetLeft;
672.
673.this._mxUp = this.mxTop + this.style_height + this._obj.offsetTop;
674.
675.}
676.
677.//mousemove时缩放 mouseup时停止
678.
679.addEventHandler(document, "mousemove", this._fR);
680.
681.addEventHandler(document, "mouseup", this._fS);
682.
683.//使鼠标移到窗口外也能释放
684.
685.if(isIE){
686.
687.addEventHandler(this._touch, "losecapture", this._fS);
688.
689.this._touch.setCapture();
690.
691.}else{
692.
693.addEventHandler(window, "blur", this._fS);
694.
695.}
696.
697. },
698.
699. //缩放
700.
701. Resize: function(e) {
702.
703.//没有触发对象的话返回
704.
705.if(!this._touch) return;
706.
707.//清除选择(ie设置捕获后默认带这个)
708.
709.window.getSelection && window.getSelection().removeAllRanges();
710.
711.//执行缩放程序
712.
713.this._fun(window.event || e);
714.
715.//设置样式
716.
717.//因为计算用的offset是把边框算进去的所以要减去
718.
719.this._obj.style.width = this.style_width - this._xBorder + "px";
720.
721.this._obj.style.height = this.style_height - this._yBorder + "px";
722.
723.this._obj.style.top = this.style_top + "px";
724.
725.this._obj.style.left = this.style_left + "px";
726.
727.//附加程序
728.
729.this.onResize();
730.
731. },
732.
733. //普通缩放
734.
735. //右边
736.
737. SetRight: function(oEvent) {
738.
739.//当前坐标位置减去左边的坐标等于当前宽度
740.
741.this.repairRight(oEvent.clientX - this._left);
742.
743. },
744.
745. //下边
746.
747. SetDown: function(oEvent) {
748.
749.this.repairDown(oEvent.clientY - this._up);
750.
751. },
752.
753. //左边
754.
755. SetLeft: function(oEvent) {
756.
757.//右边的坐标减去当前坐标位置等于当前宽度
758.
759.this.repairLeft(this._right - oEvent.clientX);
760.
761. },
762.
763. //上边
764.
765. SetUp: function(oEvent) {
766.
767.this.repairUp(this._down - oEvent.clientY);
768.
769. },
770.
771. //比例缩放
772.
773. //比例缩放右下
774.
775. scaleRightDown: function(oEvent) {
776.
777.//先计算宽度然后按比例计算高度最后根据确定的高度计算宽度（宽度优先）
778.
779.this.SetRight(oEvent);
780.
781.this.repairDown(parseInt(this.style_width / this._scale));
782.
783.this.repairRight(parseInt(this.style_height * this._scale));
784.
785. },
786.
787. //比例缩放左下
788.
789. scaleLeftDown: function(oEvent) {
790.
791.this.SetLeft(oEvent);
792.
793.this.repairDown(parseInt(this.style_width / this._scale));
794.
795.this.repairLeft(parseInt(this.style_height * this._scale));
796.
797. },
798.
799. //比例缩放右上
800.
801. scaleRightUp: function(oEvent) {
802.
803.this.SetRight(oEvent);
804.
805.this.repairUp(parseInt(this.style_width / this._scale));
806.
807.this.repairRight(parseInt(this.style_height * this._scale));
808.
809. },
810.
811. //比例缩放左上
812.
813. scaleLeftUp: function(oEvent) {
814.
815.this.SetLeft(oEvent);
816.
817.this.repairUp(parseInt(this.style_width / this._scale));
818.
819.this.repairLeft(parseInt(this.style_height * this._scale));
820.
821. },
822.
823. //这里是高度优先用于上下两边(体验更好)
824.
825. //比例缩放下右
826.
827. scaleDownRight: function(oEvent) {
828.
829.this.SetDown(oEvent);
830.
831.this.repairRight(parseInt(this.style_height * this._scale));
832.
833.this.repairDown(parseInt(this.style_width / this._scale));
834.
835. },
836.
837. //比例缩放上右
838.
839. scaleUpRight: function(oEvent) {
840.
841.this.SetUp(oEvent);
842.
843.this.repairRight(parseInt(this.style_height * this._scale));
844.
845.this.repairUp(parseInt(this.style_width / this._scale));
846.
847. },
848.
849. //修正程序
850.
851. //修正右边
852.
853. repairRight: function(iWidth) {
854.
855.//右边和下边只要设置宽度和高度就行
856.
857.//当少于最少宽度
858.
859.if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
860.
861.//当超过当前设定的最大宽度
862.
863.if(this.Limit && iWidth > this._mxRight){ iWidth = this._mxRight; }
864.
865.//修改样式
866.
867.this.style_width = iWidth;
868.
869. },
870.
871. //修正下边
872.
873. repairDown: function(iHeight) {
874.
875.if (iHeight < this.MinHeight){ iHeight = this.MinHeight; }
876.
877.if(this.Limit && iHeight > this._mxDown){ iHeight = this._mxDown; }
878.
879.this.style_height = iHeight;
880.
881. },
882.
883. //修正左边
884.
885. repairLeft: function(iWidth) {
886.
887.//左边和上边比较麻烦因为还要计算left和top
888.
889.//当少于最少宽度
890.
891.if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
892.
893.//当超过当前设定的最大宽度
894.
895.else if(this.Limit && iWidth > this._mxLeft){ iWidth = this._mxLeft; }
896.
897.//修改样式
898.
899.this.style_width = iWidth;
900.
901.this.style_left = this._obj.offsetLeft + this._obj.offsetWidth - iWidth;
902.
903. },
904.
905. //修正上边
906.
907. repairUp: function(iHeight) {
908.
909.if(iHeight < this.MinHeight){ iHeight = this.MinHeight; }
910.
911.else if(this.Limit && iHeight > this._mxUp){ iHeight = this._mxUp; }
912.
913.this.style_height = iHeight;
914.
915.this.style_top = this._obj.offsetTop + this._obj.offsetHeight - iHeight;
916.
917. },
918.
919. //停止缩放
920.
921. Stop: function() {
922.
923.//移除事件
924.
925.removeEventHandler(document, "mousemove", this._fR);
926.
927.removeEventHandler(document, "mouseup", this._fS);
928.
929.if(isIE){
930.
931.removeEventHandler(this._touch, "losecapture", this._fS);
932.
933.this._touch.releaseCapture();
934.
935.}else{
936.
937.removeEventHandler(window, "blur", this._fS);
938.
939.}
940.
941.this._touch = null;
942.
943. }
944.
945.};
946.
947.//图片切割
948.
949.var ImgCropper = Class.create();
950.
951.ImgCropper.prototype = {
952.
953. //容器对象,拖放缩放对象,图片地址,宽度,高度
954.
955. initialize: function(container, drag, url, width, height, options) {
956.
957.var oThis = this;
958.
959.//容器对象
960.
961.this.Container = $(container);
962.
963.this.Container.style.position = "relative";
964.
965.this.Container.style.overflow = "hidden";
966.
967.//拖放对象
968.
969.this.Drag = $(drag);
970.
971.this.Drag.style.cursor = "move";
972.
973.this.Drag.style.zIndex = 200;
974.
975.if(isIE){
976.
977.//设置overflow解决ie6的渲染问题(缩放时填充对象高度的问题)
978.
979.this.Drag.style.overflow = "hidden";
980.
981.//ie下用一个透明的层填充拖放对象不填充的话onmousedown会失效(未知原因)
982.
983.(function(style){
984.
985.style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
986.
987.})(this.Drag.appendChild(document.createElement("div")).style)
988.
989.}
990.
991.this._pic = this.Container.appendChild(document.createElement("img"));//图片对象
992.
993.this._cropper = this.Container.appendChild(document.createElement("img"));//切割对象
994.
995.this._pic.style.position = this._cropper.style.position = "absolute";
996.
997.this._pic.style.top = this._pic.style.left = this._cropper.style.top = this._cropper.style.left = "0";//对齐
998.
999.this._cropper.style.zIndex = 100;
1000.
1001.this._cropper.onload = function(){ oThis.SetPos(); }
1002.
1003.this.Url = url;//图片地址
1004.
1005.this.Width = parseInt(width);//宽度
1006.
1007.this.Height = parseInt(height);//高度
1008.
1009.this.SetOptions(options);
1010.
1011.this.Opacity = parseInt(this.options.Opacity);
1012.
1013.this.dragTop = parseInt(this.options.dragTop);
1014.
1015.this.dragLeft = parseInt(this.options.dragLeft);
1016.
1017.this.dragWidth = parseInt(this.options.dragWidth);
1018.
1019.this.dragHeight = parseInt(this.options.dragHeight);
1020.
1021.//设置预览对象
1022.
1023.this.View = $(this.options.View) || null;//预览对象
1024.
1025.this.viewWidth = parseInt(this.options.viewWidth);
1026.
1027.this.viewHeight = parseInt(this.options.viewHeight);
1028.
1029.this._view = null;//预览图片对象
1030.
1031.if(this.View){
1032.
1033.this.View.style.position = "relative";
1034.
1035.this.View.style.overflow = "hidden";
1036.
1037.this._view = this.View.appendChild(document.createElement("img"));
1038.
1039.this._view.style.position = "absolute";
1040.
1041.}
1042.
1043.this.Scale = parseInt(this.options.Scale);
1044.
1045.//设置拖放
1046.
1047.this._drag = new Drag(this.Drag, this.Drag, { Limit: true, onMove: function(){ oThis.SetPos(); } });
1048.
1049.//设置缩放
1050.
1051.this._resize = this.GetResize();
1052.
1053.this.Init();
1054.
1055. },
1056.
1057. //设置默认属性
1058.
1059. SetOptions: function(options) {
1060.
1061.    this.options = {//默认值
1062.
1063.Opacity: 50,//透明度(0到100)
1064.
1065.//拖放位置和宽高
1066.
1067.dragTop: 0,
1068.
1069.dragLeft: 0,
1070.
1071.dragWidth: 100,
1072.
1073.dragHeight: 100,
1074.
1075.//缩放触发对象
1076.
1077.Right: "",
1078.
1079.Left: "",
1080.
1081.Up: "",
1082.
1083.Down: "",
1084.
1085.RightDown: "",
1086.
1087.LeftDown: "",
1088.
1089.RightUp: "",
1090.
1091.LeftUp: "",
1092.
1093.Scale: false,//是否按比例缩放
1094.
1095.//预览对象设置
1096.
1097.View: "",//预览对象
1098.
1099.viewWidth: 100,//预览宽度
1100.
1101.viewHeight: 100//预览高度
1102.
1103.    };
1104.
1105.    Object.extend(this.options, options || {});
1106.
1107. },
1108.
1109. //初始化对象
1110.
1111. Init: function() {
1112.
1113.var oThis = this;
1114.
1115.//设置容器
1116.
1117.this.Container.style.width = this.Width + "px";
1118.
1119.this.Container.style.height = this.Height + "px";
1120.
1121.//设置拖放对象
1122.
1123.this.Drag.style.top = this.dragTop + "px";
1124.
1125.this.Drag.style.left = this.dragLeft + "px";
1126.
1127.this.Drag.style.width = this.dragWidth + "px";
1128.
1129.this.Drag.style.height = this.dragHeight + "px";
1130.
1131.//设置切割对象
1132.
1133.this._pic.src = this._cropper.src = this.Url;
1134.
1135.this._pic.style.width = this._cropper.style.width = this.Width + "px";
1136.
1137.this._pic.style.height = this._cropper.style.height = this.Height + "px";
1138.
1139.if(isIE){
1140.
1141.this._pic.style.filter = "alpha(opacity:" + this.Opacity + ")";
1142.
1143.} else {
1144.
1145.this._pic.style.opacity = this.Opacity / 100;
1146.
1147.}
1148.
1149.//设置预览对象
1150.
1151.if(this.View){ this._view.src = this.Url; }
1152.
1153.//设置拖放
1154.
1155.this._drag.mxRight = this.Width; this._drag.mxBottom = this.Height;
1156.
1157.//设置缩放
1158.
1159.if(this._resize){ this._resize.mxRight = this.Width; this._resize.mxBottom = this.Height; this._resize.Scale = this.Scale; }
1160.
1161. },
1162.
1163. //设置获取缩放对象
1164.
1165. GetResize: function() {
1166.
1167.var op = this.options;
1168.
1169.//有触发对象时才设置
1170.
1171.if(op.RightDown || op.LeftDown || op.RightUp || op.LeftUp || op.Right || op.Left || op.Up || op.Down ){
1172.
1173.var oThis = this, _resize = new Resize(this.Drag, { Limit: true, onResize: function(){ oThis.SetPos(); } });
1174.
1175.//设置缩放触发对象
1176.
1177.if(op.RightDown){ _resize.Set(op.RightDown, "right-down"); }
1178.
1179.if(op.LeftDown){ _resize.Set(op.LeftDown, "left-down"); }
1180.
1181.if(op.RightUp){ _resize.Set(op.RightUp, "right-up"); }
1182.
1183.if(op.LeftUp){ _resize.Set(op.LeftUp, "left-up"); }
1184.
1185.if(op.Right){ _resize.Set(op.Right, "right"); }
1186.
1187.if(op.Left){ _resize.Set(op.Left, "left"); }
1188.
1189.if(op.Up){ _resize.Set(op.Up, "up"); }
1190.
1191.if(op.Down){ _resize.Set(op.Down, "down"); }
1192.
1193.return _resize;
1194.
1195.} else { return null; }
1196.
1197. },
1198.
1199. //设置切割
1200.
1201. SetPos: function() {
1202.
1203.var o = this.Drag;
1204.
1205.//按拖放对象的参数进行切割
1206.
1207.this._cropper.style.clip = "rect(" + o.offsetTop + "px " + (o.offsetLeft + o.offsetWidth) + "px " + (o.offsetTop + o.offsetHeight) + "px " + o.offsetLeft + "px)";
1208.
1209.//切割预览
1210.
1211.if(this.View) this.PreView();
1212.
1213. },
1214.
1215. //切割预览
1216.
1217. PreView: function() {
1218.
1219.//按比例设置宽度和高度
1220.
1221.var o = this.Drag, h = this.viewWidth, w = h * o.offsetWidth / o.offsetHeight;
1222.
1223.if(w > this.viewHeight){ w = this.viewHeight; h = w * o.offsetHeight / o.offsetWidth; }
1224.
1225.//获取对应比例尺寸
1226.
1227.var scale = h / o.offsetHeight, ph = this.Height * scale, pw = this.Width * scale, pt = o.offsetTop * scale, pl = o.offsetLeft * scale, styleView = this._view.style;
1228.
1229.//设置样式
1230.
1231.styleView.width = pw + "px"; styleView.height = ph + "px";
1232.
1233.styleView.top = - pt + "px "; styleView.left = - pl + "px";
1234.
1235.//切割预览图
1236.
1237.styleView.clip = "rect(" + pt + "px " + (pl + w) + "px " + (pt + h) + "px " + pl + "px)";
1238.
1239. }
1240.
1241.}
1242.
1243.var ic = new ImgCropper("bgDiv", "dragDiv", "../image/Sunset.jpg", 300, 400, {
1244.
1245.dragTop: 50, dragLeft: 50,
1246.
1247.Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",
1248.
1249.RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
1250.
1251.View: "viewDiv", viewWidth: 200, viewHeight: 200
1252.
1253.})
1254.
1255.</script>
1256.
1257.<script>
1258.
1259.//设置图片大小
1260.
1261.function Size(w, h){
1262.
1263.ic.Width = w;
1264.
1265.ic.Height = h;
1266.
1267.ic.Init();
1268.
1269.}
1270.
1271.//换图片
1272.
1273.function Pic(url){
1274.
1275.ic.Url = url;
1276.
1277.ic.Init();
1278.
1279.}
1280.
1281.//设置透明度
1282.
1283.function Opacity(i){
1284.
1285.ic.Opacity = i;
1286.
1287.ic.Init();
1288.
1289.}
1290.
1291.//是否使用比例
1292.
1293.function Scale(b){
1294.
1295.ic.Scale = b;
1296.
1297.ic.Init();
1298.
1299.}
1300.
1301.</script>
1302.
1303.<br />
1304.
1305.<br />
1306.
1307.<div>
1308.
1309. <input name="" type="button" value=" 增肥 " onclick="Size(500,400)" />
1310.
1311. <input name="" type="button" value=" 还原 " onclick="Size(300,400)" />
1312.
1313.</div>
1314.
1315.<br />
1316.
1317.<div>
1318.
1319. <input name="" type="button" value=" 换图 " onclick="Pic('2.jpg')" />
1320.
1321. <input name="" type="button" value=" 还原 " onclick="Pic('1.jpg')" />
1322.
1323.</div>
1324.
1325.<br />
1326.
1327.<div>
1328.
1329. <input name="" type="button" value=" 透明 " onclick="Opacity(0)" />
1330.
1331. <input name="" type="button" value=" 还原 " onclick="Opacity(50)" />
1332.
1333.</div>
1334.
1335.<br />
1336.
1337.<div>
1338.
1339. <input name="" type="button" value="使用比例" onclick="Scale(true)" />
1340.
1341. <input name="" type="button" value="取消比例" onclick="Scale(false)" />
1342.
1343.</div>
1344.
1345.<br />
1346.
1347.<div>
1348.
1349. <input name="" type="button" value="生成图片" onclick="Create()" />
1350.
1351. <br />
1352.
1353. <img id="imgCreat" />
1354.
1355.</div>
1356.
1357.<script>
1358.
1359.function Create(){
1360.
1361.var p = ic.Url,
1362.
1363.x = ic.Drag.offsetLeft,
1364.
1365.y = ic.Drag.offsetTop,
1366.
1367.w = ic.Drag.offsetWidth,
1368.
1369.h = ic.Drag.offsetHeight,
1370.
1371.pw = ic.Width,
1372.
1373.ph = ic.Height;
1374.
1375.$("imgCreat").src = "/createServlet?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph;
1376.
1377.}
1378.
1379.</script>
1380.
1381.</body>
1382.
1383.</html>

分享到：