jQuery插件Cropper.js实现在线裁剪图片示例

使用教程

1、引入CSS,JS依赖库

<link rel="stylesheet" type="text/css" href="js/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="js/cropperjs/cropper.min.css"/>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="js/cropperjs/cropper.min.js" type="text/javascript"></script>

2、HTML标签

<div class="container">
    <div class="row text-center">
        <button id="btnStartShotImage" type="button" class="btn btn-success">开始裁剪图片</button>
    </div>
</div>

<!--弹出框-->
<div class="modal fade" id="myModal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
     tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h1 class="modal-title" id="myModalLabel" style="font-size:20px;">Cropper.js实时截取图片示例</h1>
            </div>
            <div class="modal-body">
                <div class="continer">
                    <div class="col-md-9">
                        <div id="cropWrapper">
                            <img src="images/plus.png" alt=""/><br/>
                            <input type="file" id="inputFile" accept="image/jpg,image/jpeg,image/gif,image/png"/>
                        </div>
                    </div>
                    <div class="col-md-3" id="previewBox"></div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-md-12 text-right">
                    <button type="button" class="btn btn-success" id="btnCropImage">
                        裁剪
                    </button>
                    <button type="button" class="btn btn-default" id="btnDismissDialog" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

3、JavaScript脚本

var ID_OF_CROP_IMAGE="tmpCropImage";

$(function () {
    $("#btnStartShotImage").click(function () {
        //显示裁剪图片的弹窗
        $('#myModal').modal('show');
        //触发文件输入框点击事件开始加载图片文件
        $("#inputFile").trigger('click');
        //放图，截取，保存，放入指定位置
        putImageToCropWrapper();
    });
});

/**
     * 在应该放置图片的位置,放入input file选择的文件
     * */
function putImageToCropWrapper() {
    var cropWrapper = document.getElementById("cropWrapper");
    var inputFile = document.getElementById("inputFile");
    var imageType = /image.*/;

    var fileOnLoadHandler = function (tmpImage) {
        return function (e) {
            tmpImage.src = e.target.result;
            initCropper();
        };
    }

    inputFile.addEventListener("change", function (evt) {
        for (var i = 0, numFiles = this.files.length; i < numFiles; i++) {
            var file = this.files[i];
            if (!file.type.match(imageType)) {
                continue;
            }
            var newImg = document.createElement("img");
            cropWrapper.innerHTML = "<input type='file' id='inputFile' accept='image/jpg,image/jpeg,image/gif,image/png' />";
            cropWrapper.appendChild(newImg);
            //给要被截取的图片加上ID,方便下一步的初始化
            $("#cropWrapper img").attr("id", ID_OF_CROP_IMAGE);

            var reader = new FileReader();
            reader.onload = fileOnLoadHandler(newImg);
            reader.readAsDataURL(file);
        }
    }, false);
}

/**
     * 截取图片
     */
function initCropper() {
    var cropImage = document.getElementById(ID_OF_CROP_IMAGE);
    var cropper = new Cropper(cropImage, {
        aspectRatio: 16 / 9,  //裁剪图片比例
        dragMode: 'none',     //拖动模式
        ready: function () {  //挂载方法：保存,转换格式等操作在这里进行
            var _this = this.cropper;

            //将截图保存成Canvas
            function cutCanvas() {
                return _this.getCroppedCanvas({
                    width: 160,
                    height: 90,
                    beforeDrawImage: function (canvas) {
                        const context = canvas.getContext('2d');
                        context.imageSmoothingEnabled = false;
                        context.imageSmoothingQuality = 'high';
                    }
                })
            };

            //将canvas截图转换为图片数据
            function convertCanvasToImage(canvas) {
                var image = new Image();
                image.src = canvas.toDataURL('image/jpeg');
                return image;
            };

            //设置裁剪按钮的点击事件
            $("#btnCropImage").click(function () {
                var html = convertCanvasToImage(cutCanvas());
                $('#previewBox').append(html);
            });

            //关闭模态框的时候清空文件域的数据
            $("#myModal").on('hide.bs.modal', function () {
                $('#inputFile').removeData();
            });
        }
    })
    }

这样就完成了Cropper.js裁剪图片的示例