cropper.js 剪切canvas 转base64

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

cropper.js 剪切canvas 转base64

相关推荐