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($) {
'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');
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;
}
},
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.$avatarPreview.selector,
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) {
// if (this.uploaded) {
// this.uploaded = false;
// this.cropDone();
// // this.uploaded = true;this.support.datauri ||
// // this.$avatarSrc.val(this.url);
// // this.startCropper();
// } else {
// this.uploaded = true;
// this.$avatarSrc.val(this.url);
// this.startCropper();
// this.cropDone();
// }
// },
//
// complete: function() {
// _this.submitEnd();
// }
// });
// },
syncUpload: function() {
this.$avatarSave.click();
},
submitStart: function() {
this.$loading.fadeIn();
},
// submitDone: function(data) {
// if($.isPlainObject(data)) {
// if(data.result) {
// this.url = data.r.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0