因为之前好几个项目和页面都要用到图片裁切功能，我就把图片裁切插件jcrop稍稍封装了一下，以达到任一个img标签，只需要非常简单的js代码即可变成可裁切的img框；
jcrop官网：http://deepliquid.com/content/Jcrop.html
简述
将页面的某个标签初始化成有裁切框样式的图片，并把裁切框信息发送给后台裁切；
使用
1、
依次引入jquery.Jcrop.min.css，jquery.js(建议不低于1.8)，jquery.Jcrop.js，JcropPlugins.js（下面给出源码）
2、页面使用裁切框位置放置标签：
<button id="jcrop39-upload" class="jcrop39-btn jcrop39-upload" type="button">上传图片</button>
<div class="jcrop39-container">
<img id="jcrop39-img" class="jcrop39-cutImg" src="裁剪图片的URL" />
<button id="jcrop39-Imgcut" class="jcrop39-btn cut" type="button">裁切图片</button>
<button id="jcrop39-ImgDelete" class="jcrop39-btn delete" type="button">删除图片</button>
</div>3、初始化:
$(function () {
var setting = {
url: 'postData.ashx', /*必要参数 图片裁切处理后台 */
imgTargat: "#jcrop39-img",/*必要参数 <img>的jquery选择器 */
cutSuccessed: functionName,/*裁切成功处理函数 */
deleteImg: functionName /*删除图片按钮处理事件 */
} Jcrop39.init(setting);
});
OK,第OK,第三部完成后页面的 就可以做裁切选择，并且已经有提交按钮提交给后台进行实际的裁切了。
————————–这里是分割线，需要更多自定义设置的往下看—————————
好了，上面已经可以使用裁切控件了，如果需要更多定制化的内容呢，比如，我需要页面一加载就初始化好我设置大小的裁切框呢？
参数说明
var setting = {
url: 'hangdler.ashx',// 图片裁切处理后台，my的是/ashx/cutImage.ashx,mymg的是/postData.aspx?op=cutImg;(必要参数)
imgTargat: "#jcrop39-img",//(必要参数) 裁切<img>的jquery选择器
aspectRatio: [3, 4],// 是否固定裁切框比例。是:[w, h] , 否:false, 默认:false(可选参数)
staticPx: [150, 150],// 是否需要裁切成固定像素,做此设置后无论裁切框大小，最后裁切出来的实际图片固定的此填写w,h。是:[w, h], 否:false, 默认:false
animateTo: [0, 0, 100, 100],// 是否初始化裁切框。是:[x, y, x2, y2](x:裁切框左上角x轴坐标,y:裁切框左上角y轴坐标,x2:框宽度,y2:框高度), 否:false(不做裁剪框的初始化 ), 默认:false(可选参数)
maxSize: [1000, 1500],// 选框最大尺寸(px) 是[w, h] , 否:false, 默认:false(可选参数)
minSize: [20, 30],// 选框最小尺寸 是[w, g], 否:false, 默认:false(可选参数)
cutSuccessed: Successed,// 裁切【结果】返回成功(不代表裁切成功)回调函数，是:函数名 否:flase,默认:无 (可选参数)
deleteImg: deleteImgFun //删除图片按钮处理函数 ，是:函数名 否:flase,默认:隐藏 .jcrop39-container ,显示 .jcrop39-upload(可选参数)
}
function Successed(data) {
alert("删除图片按钮处理函数，没有此设置则使用默认处理逻辑：隐藏 .jcrop39-container ,显示 .jcrop39-upload");
}拓展函数
Jcrop39.setImg("imgUrl") 重新设置图片PS: 上传图片功能需自己写，上传成功后可以调用拓展函数Jcrop39.setImg(“imgUrl”) 设置裁切图片。
后台我就不给出了，无非就是根据前台发送过来的参数，按要求裁切图片；
附件：
JcropPlugins.js
(function (window, undefined) {
var Jcrop39 = {
jcropApi: null,
bounds: null,
boundx: null,
boundy: null,
cutInfo: null,
imgObj: null
},
jcrop39;
Jcrop39.initSetting = function () {
Jcrop39.jcropApi.release();
if ($.isArray(jcrop39.aspectRatio)) {
Jcrop39.jcropApi.setOptions({ aspectRatio: jcrop39.aspectRatio[0] / jcrop39.aspectRatio[1] });
}
if ($.isArray(jcrop39.animateTo)) {
Jcrop39.jcropApi.animateTo(jcrop39.animateTo);
}
if ($.isArray(jcrop39.maxSize)) {
Jcrop39.jcropApi.setOptions({ maxSize: jcrop39.maxSize });
}
if ($.isArray(jcrop39.minSize)) {
Jcrop39.jcropApi.setOptions({ minSize: jcrop39.minSize });
}
};
Jcrop39.init = function (jc) {
jcrop39 = jc
Jcrop39.imgObj = $(jcrop39.imgTargat);
if (!Jcrop39.imgObj || Jcrop39.imgObj.size() == 0 || !jcrop39 || typeof (jcrop39) != "object" || !jcrop39.url) return;
Jcrop39.imgObj.Jcrop({
onChange: updatePreview,
onSelect: updatePreview
}, function () {
Jcrop39.jcropApi = this;
Jcrop39.bounds = Jcrop39.jcropApi.getBounds();
Jcrop39.boundx = Jcrop39.bounds[0];
Jcrop39.boundy = Jcrop39.bounds[1];
Jcrop39.initSetting();
});
//裁切图片
$("#jcrop39-Imgcut").click(function () {
var imgUrl = Jcrop39.imgObj.attr("src");
if (!Jcrop39.imgObj || Jcrop39.imgObj.size() == 0 || !jcrop39 || typeof (jcrop39) != "object" || !jcrop39.url || !imgUrl || imgUrl == '') return;
//正常裁切大小
try {
var postData = {
imgUrl: imgUrl,
rawW: parseInt(Jcrop39.boundx),
rawH: parseInt(Jcrop39.boundy),
cutW: parseInt(Jcrop39.cutInfo.w||0),
cutH: parseInt(Jcrop39.cutInfo.h || 0),
cutX: parseInt(Jcrop39.cutInfo.x || 0),
cutY: parseInt(Jcrop39.cutInfo.y || 0)
};
//固定裁切像素大小
if ($.isArray(jcrop39.staticPx)) {
var zoom = (Jcrop39.cutInfo.x2 - Jcrop39.cutInfo.x) / jcrop39.staticPx[0];
postData.rawW = parseInt(Jcrop39.boundx / zoom);
postData.rawH = parseInt(Jcrop39.boundy / zoom);
postData.cutW = jcrop39.staticPx[0];
postData.cutH = jcrop39.staticPx[1];
postData.cutX = parseInt(Jcrop39.cutInfo.x / zoom);
postData.cutY = parseInt(Jcrop39.cutInfo.y / zoom);
}
}catch(e){
alert("未选择裁切区域~");
return;
}
//验证剪切数据 和图片地址
if (!postData.imgUrl //图片地址
|| isNaN(postData.rawW) || isNaN(postData.rawH) || isNaN(postData.cutW) || isNaN(postData.cutH) || isNaN(postData.cutX) || isNaN(postData.cutY) //有错误数据
|| (!postData.rawW && !postData.rawH && !postData.cutW && !postData.cutH && !postData.cutX && !postData.cutY) //全部为0 即未选择裁切区域或选了一个点
) {
alert("未选择裁切区域或图片地址有误~");
return;
}
$.ajax({
url: jcrop39.url,
type: "POST",
data: postData,
success: function (data) {
if (data && jcrop39.hasOwnProperty("cutSuccessed")) {
jcrop39.cutSuccessed(data);
}
else {
if (confirm("此操作不可撤销，确定裁切吗？")) {
alert("裁切成功~");
Jcrop39.jcropApi.disable();
$("#jcrop39-ImgDelete").attr("disabled", "disabled");
}
}
}
});
});
//删除图片
$("#jcrop39-ImgDelete").click(function () {
if (jcrop39.hasOwnProperty("deleteImg")) {
jcrop39.deleteImg();
}
else {
if (confirm("确定删除图片~"))
{
$(".jcrop39-container").hide();
$("#jcrop39-upload").show();
}
}
});
};
Jcrop39.setImg = function (imgUrl) {
if (Jcrop39.jcropApi) {
var preImg = new Image();
preImg.src = imgUrl;
Jcrop39.jcropApi.setImage(imgUrl, function () {
Jcrop39.boundx = preImg.width;
Jcrop39.boundy = preImg.height;
Jcrop39.initSetting();
});
}
};
//预览图片
function updatePreview(c) {
Jcrop39.cutInfo = c;
}
window.Jcrop39 = Jcrop39;})(window);
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
