jquery.cropper 裁剪图片上传
https://github.com/fengyuanchen/cropper
1、必要的文件引用：
<script src="/path/to/jquery.js"></script><!-- jQuery is required --> <link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.js"></script>
2、HTML结构
//可以将图片或canvas直接包裹到一个块级元素中。 <!-- Wrap the image or canvas with a block element --> <div class="container"> <img src="picture.jpg"> </div>
3、插件调用
//可以使用$.fn.cropper方法来初始化该图片剪裁插件。 $('.container > img').cropper({ aspectRatio: 16 / 9, crop: function(data) { // Output the result data for cropping image. } });
4、部分参数解释
aspectRatio：类型：Number，默认值NaN。----------------设置剪裁容器的比例。
crop：类型：Function，默认值null。--------------------当改变剪裁容器或图片时触犯的事件函数。
preview：类型：String(jQuery选择器)，默认值''。-------添加额外的元素（容器）的预览裁剪效果图片。
responsive：类型：Boolean，默认值true。---------------是否在窗口尺寸改变的时候重置cropper。
checkImageOrigin：类型：Boolean，默认值true。---------默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。
data：类型：object{}----------------------------------默认情况下，裁剪框在图片的正中间，可以设置四个值：x,y,width,height，裁剪框的位置跟大小。
multiple：类型：Boolean，默认值false。----------------默认情况下，每页只支持一个裁剪器，如果需要支持多个，设置为true。
modal：类型：Boolean，默认值true。--------------------显示（true）或隐藏（false）裁剪器上方的黑色模态图层。
dashed：类型：Boolean，默认值true。-------------------显示（true）或隐藏（false）裁剪区域上方的虚线。
autoCrop：类型：Boolean，默认值true。-----------------初始化时是否允许自动渲染裁剪框。
autoCropArea：类型：Number，默认值0.8（图片的80%）。--0-1之间的数值，定义自动剪裁区域的大小。
dragCrop：类型：Boolean，默认值true。-----------------启用删除当前的裁剪区域，并通过拖动图像创建一个新的区域。
movable：类型：Boolean，默认值true。------------------是否允许移动剪裁框。
resizable：类型：Boolean，默认值true。----------------是否允许改变剪裁框的大小。
zoomable：类型：Boolean，默认值true。-----------------是否允许放大缩小图片。
rotatable：类型：Boolean，默认值true。----------------是否允许旋转图片。
minWidth：类型：Number，默认值0。---------------------裁剪区域最小宽度。
minHeight：类型：Number，默认值0。--------------------裁剪区域最小高度。
maxWidth：类型：Number，默认值Infinity。--------------裁剪区域最大宽度。
maxHeight：类型：Number，默认值Infinity。-------------裁剪区域最大高度。
5、部分方法解释
ready：类型：Function --------------------------------加载图片是异步过程，需要图片加载成功后执行的方法放入ready中
crop：类型：Function --------------------------------当改变剪裁容器或图片时触犯的事件函数
6、实战例子（洋老板）
<script>
var croppable = false;
var $image; //需要裁剪的图片
var $button; //点击按钮确定裁剪
var $result; //裁剪图片预览
var layerIndex = null;
function getRoundedCanvas(sourceCanvas) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var width = sourceCanvas.width;
var height = sourceCanvas.height;
canvas.width = width;
canvas.height = height;
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI);
context.strokeStyle = 'rgba(0,0,0,0)';
context.stroke();
context.clip();
context.drawImage(sourceCanvas, 0, 0, width, height);
return canvas;
}
function imgFileUpload() {
var input = document.getElementById("imgFileUpload");
var result,div;
if(typeof FileReader==='undefined'){
// result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
function readFile(){
var files = this.files[0];
if (!/image\/\w+/.test(files.type)) {
alert("请上传一张图片~");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(files);
reader.onload = function(e) {
var _this = this;
layerIndex = layer.open({
type: 1
,content:'<div style="display: block;height: 100%;position: relative"><img id="image" src="" alt="Picture"> <button type="button" id="button" style="position: fixed;left: 50%;bottom: 20px;z-index: 99">Crop</button></div>'
,anim: 'up'
,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 100%; padding:10px 0; border:none;opacity:0.5;background:#000'
,success : function () {
$("#image").attr('src',_this.result);
$image = $("#image");
$image.cropper({
aspectRatio: 1,
viewMode: 1,
ready: function () {
croppable = true;
}
});
$button = $('#button');
$result = $('#result');
$button.on('click', function () {
var croppedCanvas;
var roundedCanvas;
if (!croppable) {
return;
}
croppedCanvas = $image.cropper('getCroppedCanvas');
// Round
roundedCanvas = getRoundedCanvas(croppedCanvas);
layer.close(layerIndex);
$result.attr('src',roundedCanvas.toDataURL());
});
}
});
};
}
}
$(function () {
imgFileUpload();
});
</script>
<ul class="system-list"> <li class="border-b-1px"> <div class="a"> <span class="name">头像</span> <span id="account" style="position: relative"> <input type="file" class="img-file" id="imgFileUpload" style="opacity: 0;position: absolute;width: 36px;height: 36px;left: 0;top: 5px;"/> <img src="/images/user-index-default-icon.png" alt="" id="result" width="36" height="36" style="display:block;vertical-align: top;margin-top: 5px;"/> </span> <span class="arrow"><img src="/images/go.png"></span> </div> </li> </ul>
