jquery.cropper 裁剪图片上传

Posted 2020-10-16 我爱小明

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>