croppic

是一个简单功能强大的jQuery在线图片裁剪插件

下载 v1.0.1
点击这里试试吧

croppic 支持主流的浏览器, 如 chrome, firefox, IE, safari 和 opera

糖炒票子

模态

( 在一个模态对话框中打开 )

输出

( 裁剪后显示URL )

花瓶

( 无背景图 )

最小工具

( 定义显示哪些工具 )

预加载

( 如果图片已经可用 )

帮助文档

介绍

最简单的实现。注意,您必须提供容器的宽度和高度,依赖jQurey。

JS

		
		var cropperHeader = new Croppic('yourId');
				

HTML

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

CSS

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

上传URL

接收处理上传文件的路径

JS

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

您将通过AJAX POST方法以multipart / form-data形式接收图像文件;
(请注意,ajax仅限于相同的域请求)

下载php示例文件

成功保存图像后,必须返回以下json。
(限制最大缩放所需的图像宽度和高度,因此图像不会模糊不清。)

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

发生错误时的响应

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


上传参数

您要发送到图像上传处理文件的其他数据

JS

	

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

裁剪URL

图片裁剪处理文件的路径。

JS

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

您将通过AJAX POST方法接收以下数据作为multipart / form-data;
(请注意,ajax仅限于相同的域请求)

	imgUrl 		// 您的图片路径(成功上传后我们收到的图片路径)
				
	imgInitW  	// 图片的原始宽度(上传后我们收到的宽度)
	imgInitH 	// 图片的原始高度(上传后我们收到的高度)

	imgW 		// 您新缩放的图像宽度
	imgH 		// 您新缩放的图像高度

	imgX1 		// 裁剪图像相对于缩放图像的左上角
	imgY1 		// 裁剪图像相对于缩放图像的左上角

	cropW 		// 裁剪的图像宽度
	cropH 		// 裁剪的图像高度
			
下载PHP示例文件

成功保存图像后,必须返回以下json。
(限制最大缩放所需的图像宽度和高度,因此图像不会模糊不清。)

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

错误响应示例

		
			{
				"status":"error",
				"message":"你打算给用户的错误提示信息"
			}
				


裁剪数据

您要发送到图像裁剪处理文件的其他数据

JS

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

预加载图片

加载服务器上已经存在的图片

JS

		
				
		var cropperOptions = {
			cropUrl:'path_to_your_image_cropping_file.php',
			loadPicture:'你的图片路径url'
		}
		
		var cropperHeader = new Croppic('yourId', cropperOptions);
					
		
				

工具栏

doubleZoomControls为10 * zoomFactor缩放添加了两个额外的缩放控件(默认为true)
zoomFactor缩放图像以像素为单位的值(默认为10)
rotateControls为左右旋转添加两个额外的旋转控件(默认为true)
rotationFactor旋转图像为值的默认值(默认为5)

JS

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

输出 URL

成功裁剪图像后,将裁剪的图片url设置为ID为“outputUrlId”的输入框的值

HTML

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

JS

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

自定义上传按钮

如果您想要一个自定义上传图片按钮,就像第一个示例那样 here

JS

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

模态

如果要在模态窗口中打开裁剪(默认为false)

JS

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

加载中 HTML

如果要在模式窗口中打开裁切(默认为false)
“裁切div”必须包含“ LOADER”类

JS

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

内联处理

如果要使用Javascript(Filereader)而不是服务器端来处理初始Fileupload(默认为false)
并非所有浏览器都支持FILEREADER API:支持IE10 +示例

JS

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

花瓶选项

显示当前img缩放的透明图像
提示:为防止布局中断,请将裁纸器的父div设置为 "overflow":"hidden"

JS

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

回调

一些回调(打开控制台,可以观察输出裁剪器示例 )

JS

		
		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);	
			

方法

JS

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