Croppic 基于 jQuery 免费开源图片裁切插件

发布于 2019-05-17 20:22:59 字数 9241 浏览 1843 评论 0

Croppic 是一个免费的图片裁切插件，基于最新版的 jQuery 插件，Croppic 能支持大多数现代的浏览器，例如 Chrome、firefox、IE、safari 和 opera 等主流浏览器，Croppic 提供了丰富的接口和参数自定义。

浏览器兼容性

Croppic 能工作在现在的大多数的浏览器中，当然也包括 IE9：

IE8: Untested
IE9: Works!
IE10+: Works!
Safari 4+: Works!
Firefox 3+: Works!
Chrome 14+: Works!
Opera 15+: Works!

技术支持

Croppic 的 Github 地址 https://github.com/sconsult/croppic，虽然其中可以知道作者的Email等联系方法，但是请不要这么做，正确的方式是通过 Croppic Issues 提交你的问题。

安装 Croppic

下载 Croppic

如果你熟悉使用 Git，那么通过下面的命令下载 Croppic 的源文件：

$git clone https://github.com/sconsult/croppic.git

当然你也可以直接到官方网站（http://www.croppic.net/）下载Croppic 压缩包，得到 Croppic 的源文件

引入 Croppic 文件

将下载的压缩包解压到你的项目中，然后在网页的头部加入Croppic的样式文件

<link href="assets/css/croppic.css" rel="stylesheet">

然后在网页的底部引入 Croppic 的 JavaScript 脚本文件，引入之前别忘了先引入 jQuery 库

<script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.min.js"></script>
<script src="assets/js/croppic.min.js"></script>

至此 Croppic 的安装就完成，下面来看看如何使用这个插件吧！

使用 Croppic

Croppic 的使用可以说非常的简单，但是你必须设置要裁切的盒子宽度和高度。

JavaScript 代码

在页面加载完成的时候调用 Croppic 插件

$(function(){
    var cropperHeader = new Croppic('yourId');
})

HTML 代码

编写一个DIV盒子，你也可以使用其它的标签，但是一般都是使用 DIV，设置一个ID为了方便找到这个元素，这个ID和上一步的 JavaScript 代码中的ID一致。

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

CSS 代码

编写少量的 CSS 代码，主要是限制这个 DIV 盒子的高度和宽度，这也是必须的代码。

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

插件的基本使用就这么简单，但是这仅仅是前台的显示功能，真正的裁切图片我们还需要后端编程语言来处理。

上篇文章中我们介绍了Croppic的基本情况和使用方法，这篇文章我们将为大家介绍如何自定参数和后端处理需要裁切的图片，其中包含了大量的示例代码，官方也提供了大量的API接口方法。

uploadUrl

由于裁切图片是通过服务端的动态编程语言处理的，所以在初始化插件的时候，我们可以给他设置图片上传的路径，然后处理成功以后通过返回的数据来显示裁切以后的图片。

JavaScript代码

在初始化Croppic的时候设置上传路径参数；

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

插件通过AJAX POST的方法上传图片，通过设置表单为multipart/form-data数据类型，注意AJAX请求不能跨域，这也是为了安全。

Download php example file

裁切图片成功以后，你必须返回一下的JSON数据，限制最大缩放的图像宽度和高度，所以图像不出现模糊。

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

如果裁切图片失败，你需要返回一下JSON数据，方便告诉Croppic处理异常。

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

uploadDate

如果你需要发送额外的数据到服务器，你可以使用uploadDate参数

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

cropUrl

这个参数设置你处理图片的脚本地址，这个参数有别于uploadUrl，虽然使用方法相同的。

var cropperOptions = {
    cropUrl:'path_to_your_image_cropping_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

使用了这个参数，你将接收到下面的multipart/form-data数据类型。

imgUrl // your image path (the one we recieved after successfull upload)
imgInitW // your image original width (the one we recieved after upload)
imgInitH // your image original height (the one we recieved after upload)
imgW // your new scaled image width
imgH // your new scaled image height
imgX1 // top left corner of the cropped image in relation to scaled image
imgY1 // top left corner of the cropped image in relation to scaled image
cropW // cropped image width
cropH // cropped image height

成功后的图像保存，你必须返回以下JSON，图像的宽度和高度要求限制最大变焦，所以图像不出来模糊。

{
    "status":"success",
    "url":"path/croppedImg.jpg"
}

如果裁切图片失败，你需要返回一下JSON数据，方便告诉Croppic处理异常。

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

cropData

额外的数据要发送给您的图像分割处理文件

var cropperOptions = {
    customUploadButtonId:'path_to_your_image_proccessing_file.php',
    cropData:{
        "dummyData":1,
        "dummyData2":"text"
    }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

preloadImage

载入已存在服务器上的图像

var cropperOptions = {
    cropUrl:'path_to_your_image_cropping_file.php',
    loadPicture:'path-to-your-image'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

defineControls

defineControls可以设置对图片的精确控制，有几个参数是可以设置的：

doubleZoomControls 增加10×zoomFactor放大两个额外的缩放控件（默认为true）
zoomFactor 缩放图像的像素的值（默认为10）
rotateControls 添加两个额外的旋转控制左、右旋转（默认为true）
rotateFactor 旋转图像的值（默认为5）

 var cropperOptions = {
    zoomFactor:10,
    doubleZoomControls:true,
    rotateFactor:10,
    rotateControls:true            
}
var cropperHeader = new Croppic('yourId', cropperOptions);

outputUrlId

成功的图像裁剪裁剪后，在页面上显示处理过后的Image图片的URL，通过设置一个ID找到页面上的输入框。

<input type="text" id="myOutputId">

JavaScript代码

var cropperOptions = {
    outputUrlId:'myOutputId'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

customUploadButtonId

如果你想自定义上传裁切图片的按钮，你可以设置这个参数，传递一个按钮的ID

var cropperOptions = {
    customUploadButtonId:'myDivId'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

modal

如果你想在模态窗口中打开裁剪（默认是false）

var cropperOptions = {
    modal:true
}
var cropperHeader = new Croppic('yourId', cropperOptions);

loaderHtml

果你想在模态窗口中打开裁剪（默认是false），包裹的DIV的类必须设置为“LOADER”。

var cropperOptions = {
    loaderHtml:'<img class="loader" src="loader.png" >'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

processInline

如果你想在JavaScript处理初始FileUpload（有）而不是在服务器端（默认为false），不是所有的浏览器支持的API的例子有：IE10 +支持。

var cropperOptions = {
    processInline:true,
}
var cropperHeader = new Croppic('yourId', cropperOptions);

imgEyecandy options

透明图像显示当前IMG变焦，提示：为了防止布局打破，需要给父级裁切的DIV盒子设置 overflow:hidden

var cropperOptions = {
    imgEyecandy:true,
    imgEyecandyOpacity:0.2
}
var cropperHeader = new Croppic('yourId', cropperOptions);

CALLBACKS

一些回调函数（打开你的控制台输出的混乱和观看）。

var cropperOptions = {
    onBeforeImgUpload:     function(){ console.log('onBeforeImgUpload') },
    onAfterImgUpload:     function(){ console.log('onAfterImgUpload') },
    onImgDrag:        function(){ console.log('onImgDrag') },
    onImgZoom:        function(){ console.log('onImgZoom') },
    onBeforeImgCrop:     function(){ console.log('onBeforeImgCrop') },
    onAfterImgCrop:        function(){ console.log('onAfterImgCrop') },
    onReset:        function(){ console.log('onReset') },
    onError:        function(errormsg){ console.log('onError:'+errormsg) }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

METHODS

Croppic 提供了一些方法

var cropper = new Croppic('yourId', cropperOptions);
cropper.destroy()     // no need explaining here :) 
cropper.reset()     // destroys and then inits the cropper

分享到QQ

分享到微博