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');
.........完整代码请登录后点击上方下载按钮下载查看