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

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

代码语言：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($) {

	.........完整代码请登录后点击上方下载按钮下载查看