jquery实现一个图片裁剪上传图像效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：jquery实现一个图片裁剪上传图像效果代码，可以放大缩写，旋转图像，自定义裁剪区域。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/cropper.css">
    <style>
        .avatar-view {
      display: block;
      width: 220px;
      height: 220px;
      border: 3px solid #fff;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0,0,0,.15);
      cursor: pointer;
      overflow: hidden;
    }
    
    .avatar-view img {
      width: 100%;
    }
    
    .avatar-body {
      padding-right: 15px;
      padding-left: 15px;
    }
    
    .avatar-upload {
      overflow: hidden;
    }
    
    .avatar-upload label {
      display: block;
      float: left;
      clear: left;
      width: 100px;
    }
    
    .avatar-upload input {
      display: block;
      margin-left: 110px;
    }
    
    .avater-alert {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    .avatar-wrapper {
      height: 364px;
      width: 100%;
      margin-top: 15px;
      box-shadow: inset 0 0 5px rgba(0,0,0,.25);
      background-color: #fcfcfc;
      overflow: hidden;
    }
    
    .avatar-wrapper img {
      display: block;
      height: auto;
      max-width: 100%;
    }
    
    .avatar-preview {
      float: left;
      margin-top: 15px;
      margin-right: 15px;
      border: 1px solid #eee;
      border-radius: 4px;
      background-color: #fff;
      overflow: hidden;
    }
    
    .avatar-preview:hover {
      border-color: #ccf;
      box-shadow: 0 0 5px rgba(0,0,0,.15);
    }
    
    .avatar-preview img {
      width: 100%;
    }
    
    .preview-lg {
      height: 184px;
      width: 184px;
      margin-top: 15px;
    }
    
    .preview-md {
      height: 100px;
      width: 100px;
    }
    
    .preview-sm {
      height: 50px;
      width: 50px;
    }
    
    @media (min-width: 992px) {
      .avatar-preview {
        float: none;
      }
    }
    
    .avatar-btns {
      margin-top: 30px;
      margin-bottom: 15px;
    }
    
    .avatar-btns .btn-group {
      margin-right: 5px;
    }
    
    .loading {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: .75;
      filter: alpha(opacity=75);
      z-index: 20140628;
    }
    </style>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/cropper.2.3.4.js"></script>
    <script>
        (function(factory) {
        if(typeof define === 'function' && define.amd) {
                define(['jquery'], factory);
        } else if(typeof exports === 'object') {
                // Node / CommonJS
                factory(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.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));
                },

                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;

                                        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('Image upload failed!');
                                        }

                                        _this.submitEnd();

                                });
                        });

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

                click: function() {
                        this.$avatarModal.modal('show');
                        this.initPreview();
                },

                change: function() {
                        var files,
                                file;

                        if(this.support.datauri) {
                                files = this.$avatarInput.prop('files');
.........完整代码请登录后点击上方下载按钮下载查看