使用JCrop裁剪图片

JCrop是一个基本JQuery的图像裁剪插件，其主页在此 。关于JCrop的使用主页上中丰富的例子，这里要实际图片上传及裁剪的功能。

 

第一步，实现图片上传，上传完成时页面不能刷新。通常不刷新页面会使用AJAX技术，但是AJAX不能发送multipart/form-data格式的数据，这时就只能使用iframe了，可以参见这篇文章 。

 

<div id="avator-croper">
    <div>
		<!-- upload form -->
        <form id="upload-form" target="upload_target" method="post" action="/uploadAvator">
            <input type="file" name="file" /> <input type="submit" id='upload-avator' value="Upload" />
        </form>
        <iframe id="upload_target" name="upload_target" src="" style="display:none"></iframe>
    </div>

    <div id="crop-area" style="display: none">
        <div>
            <img id="cropbox" src="" />		<!-- original image -->
        </div>
        <div style="width: 150px; height: 150px; overflow: hidden; margin-left: 5px; margin-top: 10px">
            <img id="preview" src="">		<!-- preview image -->
        </div>
    </div>
    
    <div>
        <form action="/cropAvator" method="post">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <button type="submit" id="submit-avatar">Crop Image</button>
        </form>
    </div>
</div>

 

上面的HTML分为三部分，第一部分定义了图片上传的form和一个隐藏的iframe，form的target定义成iframe的id。第二部分是图片的裁剪及预览区域。第三部分是定义裁剪区域参数，包括裁剪区域左上角位置、裁剪区域宽度和高度，确认裁剪时这些参数需要传递到服务器端。下面是处理图片上传的JavaScript代码，它处理了iframe的onload事件。

 

$('#upload-form').submit(function(e) {
	$('#upload_target').one('load', function() {
		var ret = $('body', frames['upload_target'].document).html();
		var data = eval("(" + ret + ")");
		if (data.Status == 'OK') {
			var imageUrl = data.ImageUrl;
			// ...
		} else {
			alert("Upload Failed!");
		}
	});
});

 

其中省略的代码是交由JCrop处理的部分，其主要内容是设置待裁剪和预览图片的src属性，并调用JCrop方法。

 

		if (data.Status == 'OK') {
			var imageUrl = data.ImageUrl;
			$('#cropbox').attr('src', imageUrl);
			$('#preview').attr('src', imageUrl);
			$("#cropbox").Jcrop({
				onChange: showPreview,
				onSelect: showPreview,
				aspectRatio: 1
			});
			$('#crop-area').show();
		}

 

 

showPreview函数如下：

 

    function showPreview(coords) {
        var rx = 150 / coords.w;
        var ry = 150 / coords.h;

        $('#preview').css({
            width: Math.round(rx * 500) + 'px',
            height: Math.round(ry * 370) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
        $('#x').val(coords.x);
        $('#y').val(coords.y);
        $('#w').val(coords.w);
        $('#h').val(coords.h);
    };

 

用户选择裁剪区域并点击确定按钮后，选择区域参数传给服务器，并返回裁剪后的图片URL，并更新avator，也使用AJAX完成。

 

$('#submit-avatar').click(function(e) {
	e.preventDefault();
	var form = $(this).closest('form');
	$.ajax({
		type: 'POST',
		url: form.attr('action'),
		dataType: 'json',
		data: form.serialize(),
		success: function(data) {
			if (data.Status == 'OK') {
				$('#avatar-image').attr('src', data.ImageUrl);
			} else {
				alert("Server Error!");
			}
		}
	});
});