HTML5 利用 Jcrop 裁切图片

利用html FileReader读取文件上传并裁切小功能

1 选择图片 在选择图片期间我们要判断图片的类型和大小(避免上传过大的图片)

2 裁切 原理 原图片 裁切大小 矩形坐标点信息 统一放到隐藏域里 post给后端接口 编写裁切脚本 (Step 3. JS) 核心方法 bytesToSize, checkForm, updateInfo and clearInfo

图片大小在250kb以内

3 上传 裁切后的图片 UploadFile.php

出处 http://www.script-tutorials.com/html5-image-uploader-with-jcrop/

---

 

cropit裁切图片

一个jquery插件实现图片的放大并裁切插件，用FileReader加载图片，用canvas裁切。可以控制用户上传图片的大小并裁切图片

出处 http://scottcheng.github.io/cropit/