We_Relese/App/Relese/Content/Libs/avatar-cropper/sitelogo.js

(function (factory) {
    if (typeof window.define === 'function' && window.define.amd) {
        window.define(['jquery'], factory);
    } else if (typeof window.exports === 'object') {
        // Node / CommonJS
        factory(window.require('jquery'));
    } else {
        factory(jQuery);
    }
})(function () {
    'use strict';
    var console = window.console || { log: function () { } };
    function CropAvatar($element) {
        this.$container = $element;

        this.$avatarView = this.$container.find('.avatar-view');
        this.$avatar = this.$avatarView.find('img');
        this.$avatarModal = $("body").find('#avatar-modal');
        //this.$loading = $("#page-wrapper").find('.loading');

        this.$avatarForm = this.$avatarModal.find('.avatar-form');
        this.$avatarUpload = this.$avatarForm.find('.avatar-upload');
        this.$avatarSrc = this.$avatarForm.find('.avatar-src');
        this.$avatarData = this.$avatarForm.find('.avatar-data');
        this.$avatarInput = this.$avatarForm.find('.avatar-input');
        this.$avatarSave = this.$avatarForm.find('.avatar-save');
        this.$avatarBtns = this.$avatarForm.find('.avatar-btns');

        this.$avatarWrapper = this.$avatarModal.find('.avatar-wrapper');
        this.$avatarPreview = this.$avatarModal.find('.avatar-preview');
        this.$avatarPreviewClass = "#avatar-modal .avatar-preview";
        this.init();
    }

    CropAvatar.prototype = {
        constructor: CropAvatar,
        support: {
            fileList: !!$('<input type="file">').prop('files'),
            blobURLs: !!window.URL && URL.createObjectURL,
            formData: !!window.FormData
        },

        init: function () {
            this.support.datauri = this.support.fileList && this.support.blobURLs;

            if (!this.support.formData) {
                this.initIframe();
            }

            this.initTooltip();
            this.initModal();
            this.addListener();
        },
        addListener: function () {
            this.$avatarView.on('click', $.proxy(this.click, this));
            this.$avatarInput.on('change', $.proxy(this.change, this));
            this.$avatarForm.on('submit', $.proxy(this.submit, this));
            this.$avatarBtns.on('click', $.proxy(this.rotate, this));
            this.$avatarSave.on('click', $.proxy(this.ajaxUpload, this));
        },
        initTooltip: function () {
            this.$avatarView.tooltip({
                placement: 'bottom'
            });
        },
        initModal: function () {
            this.$avatarModal.modal({ show: false });
        },
        initPreview: function () {
            var url = this.$avatar.attr('src');
            this.$avatarPreview.empty().html('<img src="' + url + '">');
        },
        initIframe: function () {
            var target = 'upload-iframe-' + (new Date()).getTime(),
                $iframe = $('<iframe>').attr({
                    name: target,
                    src: ''
                }),
                $this = this;
            // Ready ifrmae
            $iframe.one('load', function () {
                // respond response
                $iframe.on('load', function () {
                    var data;
                    var e;
                    try {
                        data = $(this).contents().find('body').text();
                    } catch (e) {
                        console.log(e.message);
                    }
                    if (data) {
                        try {
                            data = $.parseJSON(data);
                        } catch (e) {
                            console.log(e.message);
                        }
                        $this.submitDone(data);
                    } else {
                        $this.submitFail('图片解析失败！');
                    }
                    $this.submitEnd();
                });
            });

            this.$iframe = $iframe;
            this.$avatarForm.attr('target', target).after($iframe.hide());
        },

        click: function () {
            if ($.fn.iwbModal) {
                this.$avatarModal.iwbModal('show2');
            } else {
                this.$avatarModal.modal('show');
            }
            this.initPreview();
        },

        change: function () {
            var files,
                file;

            if (this.support.datauri) {
                files = this.$avatarInput.prop('files');

                if (files.length > 0) {
                    file = files[0];

                    if (this.isImageFile(file)) {
                        if (this.url) {
                            URL.revokeObjectURL(this.url); // Revoke the old one
                        }

                        this.url = URL.createObjectURL(file);
                        this.startCropper();
                    }
                }
            } else {
                file = this.$avatarInput.val();

                if (this.isImageFile(file)) {
                    this.syncUpload();
                }
            }
        },

        submit: function () {
            if (!this.$avatarSrc.val() && !this.$avatarInput.val()) {
                return false;
            }

            if (this.support.formData) {
                this.ajaxUpload();
                return false;
            }
            return true;
        },

        rotate: function (e) {
            var data;

            if (this.active) {
                data = $(e.target).data();

                if (data.method) {
                    this.$img.cropper(data.method, data.option);
                }
            }
        },

        isImageFile: function (file) {
            if (file.type) {
                return /^image\/\w+$/.test(file.type);
            } else {
                return /\.(jpg|jpeg|png|gif)$/.test(file);
            }
        },

        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.$avatarPreviewClass,
                    strict: false,
                    crop: function (data) {
                        var json = [
                            '{"x":' + data.x,
                            '"y":' + data.y,
                            '"height":' + data.height,
                            '"width":' + data.width,
                            '"rotate":' + data.rotate + '}'
                        ].join();

                        $this.$avatarData.val(json);
                    }
                });

                this.active = true;
            }
        },

        stopCropper: function () {
            if (this.active) {
                this.$img.cropper('destroy');
                this.$img.remove();
                this.active = false;
            }
        },

        //ajaxUpload: function () {
        //  var url = this.$avatarForm.attr('action'),
        //      data = new FormData(this.$avatarForm[0]),
        //      $this = this;

        //  $.ajax(url, {
        //    headers: {'X-XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        //    type: 'post',
        //    data: data,
        //    dataType: 'json',
        //    processData: false,
        //    contentType: false,

        //    //beforeSend: function () {
        //    //  $this.submitStart();
        //    //},
        //    success: function (data) {
        //      $this.submitDone(data);
        //    },
        //    error: function (xmlHttpRequest, textStatus, errorThrown) {
        //      $this.submitFail(textStatus || errorThrown);
        //    }

        //      //complete: function () {
        //    //  $this.submitEnd();
        //    //}
        //  });
        //},
        ajaxUpload: function () {
            var url = this.$avatarForm.attr('action'),
                // data = new FormData(this.$avatarForm[0]),
                $this = this;

            abp.ui.setBusy();
            var fileImg = this.$img.cropper("getCroppedCanvas").toDataURL('image/jpg');
            console.log(fileImg);
            abp.ajax({
                url: url,
                type: 'POST',
                dataType: "json",
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                data: { Avatar: fileImg },
                success: function (data) {
                    $this.submitDone(data);
                },
                error: function () {
                    abp.ui.clearBusy();
                }
            });
        },
        syncUpload: function () {
            this.$avatarSave.click();
        },

        submitStart: function () {
            this.$loading.fadeIn();
        },

        submitDone: function (data) {
            abp.ui.clearBusy();
            console.log(data);
            if (data) {
                this.url = data;
                if (this.support.datauri || this.uploaded) {
                    this.uploaded = false;
                    this.cropDone();
                } else {
                    this.uploaded = true;
                    this.$avatarSrc.val(this.url);
                    this.startCropper();
                }
                this.$avatarInput.val('');
            }
            //  if ($.isPlainObject(data)) {
            //  if (data.result) {
            //    this.url = data.result;
            //    if (this.support.datauri || this.uploaded) {
            //      this.uploaded = false;
            //      this.cropDone();
            //    } else {
            //      this.uploaded = true;
            //      this.$avatarSrc.val(this.url);
            //      this.startCropper();
            //    }
            //    this.$avatarInput.val('');
            //  } else if (data.message) {
            //      this.alert(data.message);
            //  }
            //} else {
            //  this.alert('请求失败');
            //}
        },

        submitFail: function (msg) {
            this.alert(msg);
        },

        submitEnd: function () {
            this.$loading.fadeOut();
        },

        cropDone: function () {
            this.$avatarForm.get(0).reset();
            this.$avatar.attr('src', this.url);
            this.stopCropper();
            this.$avatarModal.modal('hide');
        },

        alert: function (msg) {
            var $alert = [
                '<div class="alert alert-danger avater-alert">',
                '<button type="button" class="close" data-dismiss="alert">&times;</button>',
                msg,
                '</div>'
            ].join('');

            this.$avatarUpload.after($alert);
        }
    };

    $(function () {
        return new CropAvatar($('#crop-avatar'));
    });
});