html5在线裁剪,HTML5和JQuery裁剪图像实时预览缩略图并上传

本文介绍如何使用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')