使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码

2022-11-19,,,,



1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/

案例效果如下:

2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例:

3.编写的html代码如下:

<div 编写JS代码(注意这里的280和175表示的是我要一张长为280px像素高175px像素的图片):

//号字 红色 透明度0.5"; int x = 20; int y = 40;

* String imageFormat = "jpg"; String toPath =

* "D:/test/desk/alphaI2I-001.png";

*/

// imageObj.alphaWords2Image(srcImagePath, alpha, font, fontStyle,

// fontSize, color, inputWords, x, y, imageFormat, toPath); //设置文字水印

// imageObj.alphaImage2Image(srcImagePath, appendImagePath, alpha, x, y,

// 300, 200, imageFormat, toPath);//设置图片水印

/*

* String srcImagePath = "D:/test/fileSource/003.jpg"; int[] xPoints =

* {100,150,200,240,300}; int[] yPoints = {200,60,280,160,100}; int

* nPoints = 5; Color lineColor = Color.RED; String toPath =

* "D:/test/desk/polyline-003.jpg"; String imageFormat = "jpg";

* imageObj.drawPolyline(srcImagePath, xPoints, yPoints, nPoints,

* lineColor,toPath, imageFormat);//画折线

*/

/*

* int x1 = 50; int y1 = 100; int x2 = 600; int y2 = 150; Color

* lineColor = Color.BLUE; imageObj.drawLine(srcImagePath, x1, y1, x2,

* y2, lineColor,toPath, imageFormat);//画线段

*/

/*

* String srcImagePath = "D:/test/fileSource/002.jpg"; int x = 400; int

* y = 500; int width = 10; int height = 10; Color ovalColor =

* Color.RED; String imageFormat = "jpg"; String toPath =

* "D:/test/desk/point-002.jpg"; imageObj.drawPoint(srcImagePath, x, y,

* width, height, ovalColor, imageFormat, toPath);//画一个圆点

*/

/*

* List pointList = new ArrayList(); Point p1 = new Point(60,80);

* pointList.add(p1); Point p2 = new Point(160,80); pointList.add(p2);

* Point p3 = new Point(60,180); pointList.add(p3); Point p4 = new

* Point(260,180); pointList.add(p4); Point p5 = new Point(460,380);

* pointList.add(p5); String srcImagePath =

* "D:/test/fileSource/004.jpg"; int width = 10; int height = 10; Color

* ovalColor = Color.RED; String imageFormat = "jpg"; String toPath =

* "D:/test/desk/points-004.jpg"; imageObj.drawPoints(srcImagePath,

* pointList, width, height, ovalColor, imageFormat, toPath);//画出一组(多个)点

*/

/*

* int[] xPoints = {50,100,180,400,600}; int[] yPoints =

* {200,100,160,300,640}; int nPoints = 5; Color lineColor = Color.PINK;

* String srcImagePath = "D:/test/fileSource/003.jpg"; String toPath =

* "D:/test/desk/showpoints-003.jpg";

* imageObj.drawPolylineShowPoints(srcImagePath, xPoints, yPoints,

* nPoints, lineColor, width, height, ovalColor, toPath,

* imageFormat);//画折线并突出显示点

*/

/*

* String srcImagePath ="D:/test/fileSource/004.jpg"; int[] xPoints

* ={50,90,180,320,640}; int[] yPoints ={200,300,120,240,360}; int

* nPoints = 5; Color polygonColor = Color.PINK; float alpha = (float)

* 0.2; String imageFormat ="jpg"; String toPath

* ="D:/test/desk/drawalpha-004.jpg";

* imageObj.drawAndAlphaPolygon(srcImagePath, xPoints, yPoints, nPoints,

* polygonColor, alpha, imageFormat, toPath);

*/

/*

* String negativeImagePath = "D:/test/fileSource/001.jpg"; String

* additionImagePath = "D:/test/fileSource/006.png"; String toPath =

* "D:/test/fileSource/001.jpg"; long start =

* System.currentTimeMillis(); for(int i=0;i<1000;i++){ Random rand =

* new Random(); int x = rand.nextInt(1024); int y = rand.nextInt(768);

* imageObj.mergeBothImage(negativeImagePath, additionImagePath, x, y,

* toPath);//每次附加合并一张图片(循环若干次) } long end = System.currentTimeMillis();

* System.out.println(end-start);

*/

// 100 -- 45844

// 1000 -- 411156

/*

* 改进思路:将mergeBothImage方法 修改为mergeImageList方法,

* 通过将图片的坐标点装入list容器,然后再取出一来在方法中一次性与图片合并, 不再每次都打开底图、保存合成图片,关闭流

*/

// 叠加组合图像

/*

* String negativeImagePath = "D:/test/fileSource/001.jpg"; String

* toPath = "D:/test/fileSource/001.jpg"; String additionImagePath =

* "D:/test/fileSource/007.png"; List additionImageList = new

* ArrayList(); int count = 0; for(int

* i=0;i<100;i++){//为什么总是连续生成一样的随机数??? Random rand = new Random(); int x

* = rand.nextInt(1020); String xStr = x+""; int y = rand.nextInt(760);

* String yStr = y +""; String[] str = {xStr,yStr,additionImagePath};

* additionImageList.add(str); count++;

* //System.out.println(xStr+"   :     "+yStr); }

* System.out.println(count); long start = System.currentTimeMillis();

* imageObj.mergeImageList(negativeImagePath, additionImageList,"jpg",

* toPath); long end = System.currentTimeMillis();

* System.out.println(end-start);

*/

// 第一次 第二次 第三次

// 100张耗时(毫秒) --2003 1792 1869 1747 1871 1793

// 1000张耗时(毫秒) --15334 15200 15236 15903 16028 15545

// 10000张耗时(毫秒) --153010 153340 152673 154978 156506 154854

// 如果list.size()<=100,则调用此方法,

// 如果list.size()>100,则调用Jmagick的方法。

/*

* List iamgePathList = new ArrayList(); // D:/test/16a/

* iamgePathList.add("D:/test/16a/12384_2492.jpg");

* iamgePathList.add("D:/test/16a/12384_2493.jpg");

* iamgePathList.add("D:/test/16a/12384_2494.jpg");

* iamgePathList.add("D:/test/16a/12384_2495.jpg");

* iamgePathList.add("D:/test/16a/12384_2496.jpg");

* iamgePathList.add("D:/test/16a/12384_2497.jpg");

* iamgePathList.add("D:/test/16a/12384_2498.jpg");

* iamgePathList.add("D:/test/16a/12384_2499.jpg");

* iamgePathList.add("D:/test/16a/12384_2500.jpg");

* iamgePathList.add("D:/test/16a/12384_2501.jpg");

* iamgePathList.add("D:/test/16a/12384_2502.jpg");

*/

// String imageFormat = "jpg";

// String toPath = "D:/test/desk/16a_v1.jpg";

// imageObj.joinImageListHorizontal(iamgePathList, imageFormat, toPath);

/*

* String imageFormat = "jpg"; String[] pics1 =

* {"D:/test/16a/12384_2502.jpg","D:/test/16a/12384_2501.jpg",

* "D:/test/16a/12384_2500.jpg"

* ,"D:/test/16a/12384_2499.jpg","D:/test/16a/12384_2498.jpg",

* "D:/test/16a/12384_2497.jpg"

* ,"D:/test/16a/12384_2496.jpg","D:/test/16a/12384_2495.jpg",

* "D:/test/16a/12384_2494.jpg"

* ,"D:/test/16a/12384_2493.jpg","D:/test/16a/12384_2492.jpg"};

*

* String[] pics2 =

* {"D:/test/16a/12385_2502.jpg","D:/test/16a/12385_2501.jpg",

* "D:/test/16a/12385_2500.jpg"

* ,"D:/test/16a/12385_2499.jpg","D:/test/16a/12385_2498.jpg",

* "D:/test/16a/12385_2497.jpg"

* ,"D:/test/16a/12385_2496.jpg","D:/test/16a/12385_2495.jpg",

* "D:/test/16a/12385_2494.jpg"

* ,"D:/test/16a/12385_2493.jpg","D:/test/16a/12385_2492.jpg"};

*

* String[] pics3 =

* {"D:/test/16a/12386_2502.jpg","D:/test/16a/12386_2501.jpg",

* "D:/test/16a/12386_2500.jpg"

* ,"D:/test/16a/12386_2499.jpg","D:/test/16a/12386_2498.jpg",

* "D:/test/16a/12386_2497.jpg"

* ,"D:/test/16a/12386_2496.jpg","D:/test/16a/12386_2495.jpg",

* "D:/test/16a/12386_2494.jpg"

* ,"D:/test/16a/12386_2493.jpg","D:/test/16a/12386_2492.jpg"};

*

* String[] pics4 =

* {"D:/test/16a/12387_2502.jpg","D:/test/16a/12387_2501.jpg",

* "D:/test/16a/12387_2500.jpg"

* ,"D:/test/16a/12387_2499.jpg","D:/test/16a/12387_2498.jpg",

* "D:/test/16a/12387_2497.jpg"

* ,"D:/test/16a/12387_2496.jpg","D:/test/16a/12387_2495.jpg",

* "D:/test/16a/12387_2494.jpg"

* ,"D:/test/16a/12387_2493.jpg","D:/test/16a/12387_2492.jpg"};

*

* String[] pics5 =

* {"D:/test/16a/12388_2502.jpg","D:/test/16a/12388_2501.jpg",

* "D:/test/16a/12388_2500.jpg"

* ,"D:/test/16a/12388_2499.jpg","D:/test/16a/12388_2498.jpg",

* "D:/test/16a/12388_2497.jpg"

* ,"D:/test/16a/12388_2496.jpg","D:/test/16a/12388_2495.jpg",

* "D:/test/16a/12388_2494.jpg"

* ,"D:/test/16a/12388_2493.jpg","D:/test/16a/12388_2492.jpg"};

*

* String[] pics6 =

* {"D:/test/16a/12389_2502.jpg","D:/test/16a/12389_2501.jpg",

* "D:/test/16a/12389_2500.jpg"

* ,"D:/test/16a/12389_2499.jpg","D:/test/16a/12389_2498.jpg",

* "D:/test/16a/12389_2497.jpg"

* ,"D:/test/16a/12389_2496.jpg","D:/test/16a/12389_2495.jpg",

* "D:/test/16a/12389_2494.jpg"

* ,"D:/test/16a/12389_2493.jpg","D:/test/16a/12389_2492.jpg"};

*

* String toPath1 = "D:/test/desk/16a_v1.jpg"; String toPath2 =

* "D:/test/desk/16a_v2.jpg"; String toPath3 =

* "D:/test/desk/16a_v3.jpg"; String toPath4 =

* "D:/test/desk/16a_v4.jpg"; String toPath5 =

* "D:/test/desk/16a_v5.jpg"; String toPath6 =

* "D:/test/desk/16a_v6.jpg";

*

* String[] pics7 = {toPath1,toPath2,toPath3,toPath4,toPath5,toPath6};

* String toPath7 = "D:/test/desk/16a_h1.jpg";

*

* long start = System.currentTimeMillis();

* imageObj.joinImageListVertical(pics1, imageFormat, toPath1);

* imageObj.joinImageListVertical(pics2, imageFormat, toPath2);

* imageObj.joinImageListVertical(pics3, imageFormat, toPath3);

* imageObj.joinImageListVertical(pics4, imageFormat, toPath4);

* imageObj.joinImageListVertical(pics5, imageFormat, toPath5);

* imageObj.joinImageListVertical(pics6, imageFormat, toPath6);

*

* imageObj.joinImageListHorizontal(pics7, imageFormat, toPath7); long

* end = System.currentTimeMillis(); System.out.println(end-start);

*/

}

}

使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码的相关教程结束。

《使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码.doc》

下载本文的Word格式文档,以方便收藏与打印。