cropper.js 下載於2017.9.2；

根據cropper.js下cropper-avatar修改；

特點：自適應，剪下、旋轉、放大、縮小，canvas轉IMG及時預覽，img url base64

剪下圖片,修改crop:

crop: function () {
    _this.urlCanvas();
}

Canvas toDataURL() 方法返回一個包含圖片展示的 data URI：  “data:image/png;base64.....”

urlCanvas:function(){
    var 
 
dataurl = this.$img.cropper("getCroppedCanvas");
    var rectImage = document.createElement('img');
    rectImage.src = dataurl.toDataURL('image/jpeg');
    this.$avatarPreviewmd.html('').append(rectImage);
},

修改的程式碼塊：

startCropper: function () {
    var _this = this;

    if (this.active
 
) {
        this.$img.cropper('replace', this.url);
    } else {
        this.$img = $('<img src="' + this.url + '">');
        this.$avatarWrapper.empty().html(this.$img);
        this.$img.cropper({
            aspectRatio: 1,
            preview: this.$avatarPreview.selector,
            crop
 
: function () {
                _this.urlCanvas();
            }
        });


        this.active = true;
    }

    this.$avatarModal.one('hidden.bs.modal', function () {
        _this.$avatarPreview.empty();
        _this.stopCropper();
    });
},
urlCanvas:function(){
    var dataurl = this.$img.cropper("getCroppedCanvas");
    var rectImage = document.createElement('img');
    rectImage.src = dataurl.toDataURL('image/jpeg');
    this.$avatarPreviewmd.html('').append(rectImage);
},

作為一個JS菜鳥，認真看了cropper.js的英文文件，加baidu別人的分享，整合了一個適合自己的。

全部demo:

https://github.com/fanyuyin