本文介绍如何使用HTML5和JQuery裁剪图像实时预览缩略图并上传，需要用到插件Jcrop。

HTML5和JQuery裁剪图片

使用HTML5和JQuery裁剪图片

调用JQuery库文件

调用Jcrop js插件

该js文件需要下载到本地(文件包含在本文源码压缩包里)，调用时要注意文件路径。

调用css文件

css文件要下载到本地(文件包含在本文源码压缩包里)，调用时要注意文件路径。

html标记

HTML标记由HTML FileUpload、HTML Image、HTML按钮、HTML5 Canvas 和一些隐藏字段组成。

JQuery实现代码

$(function () {

$('#FileUpload1').change(function () {

$('#Image1').hide();

var reader = new FileReader();

reader.onload = function (e) {

$('#Image1').show();

$('#Image1').attr("src", e.target.result);

$('#Image1').Jcrop({

onChange: SetCoordinates,

onSelect: SetCoordinates

});

}

reader.readAsDataURL($(this)[0].files[0]);

});

$('#btnCrop').click(function () {

var x1 = $('#imgX1').val();

var y1 = $('#imgY1').val();

var width = $('#imgWidth').val();

var height = $('#imgHeight').val();

var canvas = $("#canvas")[0];

var context = canvas.getContext('2d');

var img = new Image();

img.onload = function () {

canvas.height = height;

canvas.width = width;

context.drawImage(img, x1, y1, width, height, 0, 0, width, height);

$('#imgCropped').val(canvas.toDataURL());

};

img.src = $('#Image1').attr("src");

});

});

function SetCoordinates(c) {

$('#imgX1').val(c.x);

$('#imgY1').val(c.y);

$('#imgWidth').val(c.w);

$('#imgHeight').val(c.h);

$('#btnCrop').show();

};

在jquery document ready事件处理程序中，将更改事件处理程序分配给FileUpload控件，并将单击事件处理程序分配给html按钮。

当在HTML FileUpload控件中选择文件时，将使用HTML FileReader API读取文件，然后图像显示在image元素中，最后将Jcrop插件应用于image元素。

注：有关使用HTML5 FileReader API显示图像的更多详细信息，请参阅我的文章“图片上传之前用 jQuery FileReader() 显示预览图的实例”。

Jcrop插件在其onChange和onSelect事件处理程序上调用SetCoordinates函数，它允许我们将坐标和尺寸(即裁剪图像的高度和宽度)保存到隐藏字段中。

$('#Image1').Jcrop({

onChange: SetCoordinates,

onSelect: SetCoordinates

});

单击裁剪按钮时，它首先创建HTML5 Canvas的实例，然后使用OnLoad事件处理程序将图像加载到图像对象中。

在OnLoad事件处理程序中，使用保存坐标和尺寸(即裁剪图像的高度和宽度)在Canvas上重新绘制原始图像。

最后，使用toDataURL方法从Canvas中提取剪切图像的base64字符串，并保存在imgCropped hidden字段中，该字段稍后可发送到服务器以保存图像。

完整HTML代码

---

$(function () {

$('#FileUpload1').change(function () {

$('#Image1').hide();

var reader = new FileReader();

reader.onload = function (e) {

$('#Image1').show();

$('#Image1').attr("src", e.target.result);

$('#Image1').Jcrop({

onChange: SetCoordinates,

onSelect: SetCoordinates

});

}

reader.readAsDataURL($(this)[0].files[0]);

});

$('#btnCrop').click(function () {

var x1 = $('#imgX1').val();

var y1 = $('#imgY1').val();

var width = $('#imgWidth').val();

var height = $('#imgHeight').val();

var canvas = $("#canvas")[0];

var context = canvas.getContext('2d');

var img = new Image();

img.onload = function () {

canvas.height = height;

canvas.width = width;

context.drawImage(img, x1, y1, width, height, 0, 0, width, height);

$('#imgCropped').val(canvas.toDataURL());

};

img.src = $('#Image1').attr("src");

});

});

function SetCoordinates(c) {

$('#imgX1').val(c.x);

$('#imgY1').val(c.y);

$('#imgWidth').val(c.w);

$('#imgHeight').val(c.h);

$('#btnCrop').show();

};

效果如图：

HTML5和JQuery裁剪图片

上传裁剪图片到服务器

由于裁剪图片以base64字符串形式存储在imgCropped字段中，所以上传图片其实是在服务器端接收该字段的字符串即可，然后可在服务器端把该base64字符串转换为图片保存起来。这里不再提供服务器端处理程序，大家根据自己编程的语言，例如php，可直接百度“php把base64字符串转换为图片保存”。

您可能对以下文章也感兴趣