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

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

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

案例效果如下：

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

3.编写的html代码如下：

封面截取

<a href="javascript:void(0)"

onClick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X</a>

</div>

<img id="jcrop_target"

src="<c:url value="/resources/cartoon2/images/images/banner7.jpg"/>"

width="280" height="553" />

</div>

<img id="cutImgId"

src="<c:url value="/resources/cartoon2/images/images/banner7.jpg"/>"

width="280" height="553" />

</div>

</div>

<a href="javascript:void(0)" class="button"

onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</a>

</div>

4编写JS代码（注意这里的280和175表示的是我要一张长为280px像素高175px像素的图片）：

//封面上传,截图

//上传后返回的文件名

var filename;

var fileid;

//裁剪主要用到了jcrop_api

var jcrop_api,boundx,boundy;

//原始文件名称

var originalfilename;

//实际图片的宽高

var imgweight,imgheight;

//dx：实际图片宽/显示宽度

//dy: 实际图片高/显示高度

//scale:最终缩放比

// var dx,dy,scale = 1;

// var displayW = 175, displayH = 350;

var imgObj = new Image();

$(function() {

init();

});

function init() {

//文件上传的js组件(FileUpload的js组件)

$('#uploadCover').fileupload({

dataType: 'json',

//autoUpload: true,

url:'/contentAffix/upTemp',

done: function (e, data) {

if(jcrop_api!=null){

jcrop_api.destroy();

}

$.each(data.result, function (index, file) {

if(index=='filedesc') {

//获取文件名称

filename=file.filename;

//实际的文件高度

imgweight = file.imgweight;

//实际的文件宽度

imgheight = file.imgheight;

// //设置缩放比例

// dx = imgweight / displayW;

// dy = imgheight / displayH;

// if(dx > dy && dy > 1) {

// scale = dx;

// }

// if(dy > dx && dx > 1) {

// scale = dy;

// }

// displayW = imgweight / scale;

// displayH = imgheight / scale;

// $("#jcrop_target").css({

// width:displayW + 'px',

// height:displayH + 'px'

// });

// $(".tailoringc .tailoringl").css({

// width:(displayW + 2) + 'px',

// height:(displayH + 2) + 'px'

// });

originalfilename = file.originalfilename;

fileid=file.id;

$('#light').show();

$('#fade').show();

var imgurl = file.filepath+'/'+file.filename;

$('#jcrop_target').attr('src',imgurl);

$('#cutImgId').attr('src',imgurl);

cutPic();

//重新加载图像到jcrop，才能小图上正确显示截图位置

//jcrop_api.setImage(imgurl);

}

});

$("#pickCover").click(function () {

$("#uploadCover").trigger('click');

});

$('body').data('filelist', new Array());

}

//点击裁剪时做的操作

//传递到后台的是最终在实际图片上的位置和宽高

function saveUploadImg(){

c = jcrop_api.tellSelect();

if (parseInt(c.w) > 0) {

$.ajax({

url:'/cartoon-web/contentAffix/cutimageAndSaveAffix',

data :{"pointx":Math.round(c.x * imgweight / 280),"pointy":Math.round(c.y * imgheight / 350),"pointw":Math.round(c.w * imgweight / 280),"pointh":Math.round(c.h * imgheight / 350),"filename":filename,"fileid":fileid,"originalfilename":originalfilename},

dataType:'json',

success: function(data){

if(data.result == "success"){

$("#fmimg").attr('src', data.cropImgPath+"?r="+new Date().getTime());

$('input[type=hidden][name=coverAffixId]').val(fileid);

$('#light').hide();

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

猜你喜欢