分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/
案例效果如下:
2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例:
3.编写的html代码如下:
<div id="light" class="white_content"> <div class="vatitlee"> 封面截取 <div class="guan"> <a href="javascript:void(0)" onClick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X</a> </div> </div>
<div class="tailoringc"> <div class="tailoringl"> <img id="jcrop_target" src="<c:url value="/resources/cartoon2/images/images/banner7.jpg"/>" width="280" height="553" /> </div>
<div class="tailoringr" style='overflow: hidden;'> <img id="cutImgId" src="<c:url value="/resources/cartoon2/images/images/banner7.jpg"/>" width="280" height="553" /> </div>
<div class="clear"></div> </div> <div class="tailoringb"> <a class="button" href="javascript:void(0)" onclick="saveUploadImg()">裁剪</a> <a href="javascript:void(0)" class="button" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</a> </div> </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(); |