jQuery图像裁剪插件croppic

查看演示立即下载

插件描述：croppic图像裁剪将满足您的需求，图像加载效果、展现效果以及裁剪都非常棒，相信您看Demo后一定会喜欢上此插件.

croppic图像裁剪将满足您的需求，图像加载效果、展现效果以及裁剪都非常棒，相信您看Demo后一定会喜欢上此插件.

实用方法

初始化

最简单的实现。请注意您必须提供该容器的宽度和高度。

1	`var` `cropperHeader =` `new` `Crop('yourId');`

HTML

1	`<div` `id="yourId"></div>`

CSS

#cropContainerHeader {
    width: 200px;
    height: 150px;
    position:relative; /* or fixed or absolute */
}

上载 URL

您的 img 上载处理文件的路径。

var cropperHeader = new Crop('yourId', cropperOptions);
    var cropperOptions = {
        uploadUrl:'path_to_your_image_proccessing_file.php'
}

您将收到通过 AJAX POST 方法的图像文件作为多部分/格式数据；

（请注意 ajax 仅限于同一域请求）

后保存的图像成功，你必须返回以下 json。

（图像宽度和高度所需的限制最大缩放级别，所以图像不模糊。

{
    "status":"success",
    "url":"path/img.jpg",
    "width":originalImgWidth,
    "height":originalImgHeight
}

错误响应的情况下

{
    "status":"error",
    "message":"your error message text"
}

上传数据

您想要发送给您的图像上传处理文件的附加数据

var cropperHeader = new Crop('yourId', cropperOptions);
var cropperOptions = {
    uploadUrl: 'path_to_your_image_proccessing_file.php',
    uploadData: {
        "dummyData": 1,
        "dummyData2": "text"
    }
}

还有很多操作详情请查看官方文档。

==============以下内容由 MR-小东提供============

关于剪裁的问题：

1、如果是用的php做后端处理，基本上看一下示例就没问题了。

2、如果后端是用的其它语言，要注意在裁剪的时候要处理两次图片，因为有些图片可能很大，在上传了之后返回页面预览的时候不是1：1显示的，而是有缩放的，裁剪传到后端的的坐标等都是从预览的大小来的，而不是实际大小，因为需要在裁剪之前先把图片调整到预览图的大小（imgW，imgH）后再用裁剪的大小和坐标处理图片就OK了。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery仿易迅banner效果兼容ie6
下一个特效： jQuery描述插件