头像截取 图片上传 js插件
先看一下整体效果
页面html
<div class="row">
<div class="tabs-container">
<ul class="nav nav-tabs">
<li>
<a style="color: #676a6c;padding: 10px 30px 10px 40px;"> 上传头像<span style="color:red;">*</span></a>
</li>
<li class="active">
<a data-toggle="tab" href="#tab-1" aria-expanded="true"> 本地上传</a>
</li>
<li class="">
<a data-toggle="tab" href="#tab-2" aria-expanded="false">相册选取</a>
</li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="panel-body" style="height:475px">
<div class="container">
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</div>
</div>
<div class="cropped"></div>
<div class="action">
<div class="new-contentarea tc">
<a href="javascript:void(0)" class="upload-img">
<label for="upload-file">上传图像</label>
</a>
<input type="file" class="" name="upload-file" id="upload-file" />
</div>
<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
</div>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane">
<div class="panel-body" id="Album" style="height:475px;overflow: scroll;overflow-x: hidden;">
<a class="fancybox" title="选取该照片">
<img src="/assets/img/Inteall/HeadPortrait/user_Doctor_01.jpg" alt="图片" />
</a>
<a class="fancybox" title="选取该照片">
<img src="/assets/img/Inteall/HeadPortrait/user_Doctor_02.jpg" alt="图片" />
</a>
<a class="fancybox" title="选取该照片">
<img src="/assets/img/Inteall/HeadPortrait/user_Doctor_03.jpg" alt="图片" />
</a>
<a class="fancybox" title="选取该照片">
<img src="/assets/img/Inteall/HeadPortrait/user_Doctor_04.jpg" alt="图片" />
</a>
<a class="fancybox" title="选取该照片">
<img src="/assets/img/Inteall/HeadPortrait/user_Doctor_05.jpg" alt="图片" />
</a>
<a class="fancybox" title="选取该照片">
<img src="/assets/img/Inteall/HeadPortrait/user_Doctor_06.jpg" alt="图片" />
</a>
</div>
</div>
</div>
</div>
</div>
页面js引用
<script src="/assets/js/jquery.js"></script>
<script src="~/assets/js/cropbox/cropbox.js"></script>
<script type="text/javascript">
var HeaderImg = null, EditHeaderImg = null, cropper = null, options =
{
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: "/assets/img/Inteall/HeadPortrait/user_Doctor_01.jpg",
loadAfter: function () { $('#btnCrop').click(); }
};
$(window).load(function () {
cropper = $('.imageBox').cropbox(options)
$('#upload-file').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
options.imgSrc = e.target.result;
cropper = $('.imageBox').cropbox(options);
}
reader.readAsDataURL(this.files[]);
this.files = null;
});
$('#btnCrop').on('click', function () {
HeaderImg = cropper.getDataURL();
$('.cropped').html('');
//$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
$('.cropped').append('<img src="' + HeaderImg + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
});
$('#btnZoomIn').on('click', function () {
cropper.zoomIn();
});
$('#btnZoomOut').on('click', function () {
cropper.zoomOut();
});
$(".imageBox").autoScroll();
$("#Album").autoScroll(); $('.fancybox img').each(function () {
$(this).click(function () {
options.imgSrc = $(this).attr('src');
cropper = $('.imageBox').cropbox(options);
$('.nav-tabs li:nth(1) a').click();
$('#btnCrop').click();
});
});
});
</script>
cropbox.js
/**
* Created by ezgoing on 14/9/2014.
*/ "use strict";
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(jQuery);
}
}(function ($) {
var cropbox = function (options, el) {
var el = el || $(options.imageBox),
obj =
{
state: {},
ratio: ,
options: options,
imageBox: el,
thumbBox: el.find(options.thumbBox),
spinner: el.find(options.spinner),
image: new Image(),
getDataURL: function () {
var width = this.thumbBox.width(),
height = this.thumbBox.height(),
canvas = document.createElement("canvas"),
dim = el.css('background-position').split(' '),
size = el.css('background-size').split(' '),
dx = parseInt(dim[]) - el.width() / + width / ,
dy = parseInt(dim[]) - el.height() / + height / ,
dw = parseInt(size[]),
dh = parseInt(size[]),
sh = parseInt(this.image.height),
sw = parseInt(this.image.width); canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
context.drawImage(this.image, , , sw, sh, dx, dy, dw, dh);
var imageData = canvas.toDataURL('image/png');
return imageData;
},
getBlob: function () {
var imageData = this.getDataURL();
var b64 = imageData.replace('data:image/png;base64,', '');
var binary = atob(b64);
var array = [];
for (var i = ; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], { type: 'image/png' });
},
zoomIn: function () {
this.ratio *= 1.1;
setBackground();
},
zoomOut: function () {
this.ratio *= 0.9;
setBackground();
},
loadAfter: options.loadAfter || function () { }
},
setBackground = function (IsOnload) {
var w = parseInt(obj.image.width) * obj.ratio;
var h = parseInt(obj.image.height) * obj.ratio; var pw = (el.width() - w) / ;
var ph = (el.height() - h) / ; el.css({
'background-image': 'url(' + obj.image.src + ')',
'background-size': w + 'px ' + h + 'px',
'background-position': pw + 'px ' + ph + 'px',
'background-repeat': 'no-repeat'
});
},
imgMouseDown = function (e) {
e.stopImmediatePropagation(); obj.state.dragable = true;
obj.state.mouseX = e.clientX;
obj.state.mouseY = e.clientY;
},
imgMouseMove = function (e) {
e.stopImmediatePropagation(); if (obj.state.dragable) {
var x = e.clientX - obj.state.mouseX;
var y = e.clientY - obj.state.mouseY; var bg = el.css('background-position').split(' '); var bgX = x + parseInt(bg[]);
var bgY = y + parseInt(bg[]); el.css('background-position', bgX + 'px ' + bgY + 'px'); obj.state.mouseX = e.clientX;
obj.state.mouseY = e.clientY;
}
},
imgMouseUp = function (e) {
e.stopImmediatePropagation();
obj.state.dragable = false;
},
zoomImage = function (e) {
e.originalEvent.wheelDelta > || e.originalEvent.detail < ? obj.ratio *= 1.1 : obj.ratio *= 0.9;
setBackground();
} obj.spinner.show();
obj.image.onload = function () {
obj.spinner.hide();
setBackground('onload'); el.bind('mousedown', imgMouseDown);
el.bind('mousemove', imgMouseMove);
$(window).bind('mouseup', imgMouseUp);
el.bind('mousewheel DOMMouseScroll', zoomImage);
obj.loadAfter();
};
obj.image.src = options.imgSrc;
el.on('remove', function () { $(window).unbind('mouseup', imgMouseUp) }); return obj;
}; jQuery.fn.cropbox = function (options) {
return new cropbox(options, this);
};
})); $.fn.extend({
"preventScroll": function () {
$(this).each(function () {
var _this = this;
if (navigator.userAgent.indexOf('Firefox') >= ) { //firefox
_this.addEventListener('DOMMouseScroll', function (e) { e.preventDefault(); }, false);
} else {
_this.onmousewheel = function (e) {
return false;
};
}
})
},
"autoScroll": function () {
$(this).each(function () {
var _this = this;
if (navigator.userAgent.indexOf('Firefox') >= ) { //firefox
_this.addEventListener('DOMMouseScroll', function (e) {
_this.scrollTop += e.detail > ? : -;
e.preventDefault();
}, false);
} else {
_this.onmousewheel = function (e) {
e = e || window.event;
_this.scrollTop += e.wheelDelta > ? - : ;
return false;
};
}
})
}
});
cropbox.css
@charset "utf-8"; .container {
width: 400px;
position: relative;
font-family: 微软雅黑;
font-size: 12px;
margin-left: 0px;
} .container p {
line-height: 12px;
line-height: 0px;
height: 0px;
margin: 10px;
color: #bbb;
} .action {
width: 400px;
height: 30px;
margin: 10px ;
} .cropped {
position: absolute;
right: -230px;
top: ;
width: 200px;
/*border: 1px #ddd solid;*/
height: 300px;
padding: 4px;
/* box-shadow: 0px 0px 12px #ddd;*/
text-align: center;
} .imageBox {
position: relative;
height: 400px;
width: 400px;
border: 1px solid #aaa;
background: #fff;
overflow: hidden;
background-repeat: no-repeat;
cursor: move;
box-shadow: 4px 4px 12px #B0B0B0;
} .imageBox .thumbBox {
position: absolute;
top: %;
left: %;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
box-sizing: border-box;
border: 1px solid rgb(, , );
box-shadow: 1000px rgba(, , , 0.5);
background: none repeat scroll % % transparent;
} .imageBox .spinner {
position: absolute;
top: ;
left: ;
bottom: ;
right: ;
text-align: center;
line-height: 400px;
background: rgba(,,,0.7);
} .Btnsty_peyton {
float: right;
width: 66px;
display: inline-block;
margin-bottom: 10px;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #FFFFFF;
margin: 0px 2px;
background-color: #4dbec4;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
box-shadow: 0px 0px 5px #B0B0B0;
border: 0px #fff solid;
}
/*选择文件上传*/
.new-contentarea {
width: 100px;
overflow: hidden;
margin: auto;
position: relative;
float: left;
} .new-contentarea label {
width: %;
height: %;
display: block;
} .new-contentarea input[type=file] {
width: 100px;
height: 30px;
background: #;
margin: auto;
position: absolute;
margin-right: -94px;
top: ;
right /*\**/: 0px\;
margin-right /*\**/: 0px\;
width /*\**/: 10px\;
opacity: ;
filter: alpha(opacity=);
z-index: ;
} a.upload-img {
width: 100px;
display: inline-block;
margin-bottom: 10px;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #FFFFFF;
background-color: #4dbec4;
border-radius: 3px;
text-decoration: none;
border: 0px #fff solid;
box-shadow: 0px 0px 5px #B0B0B0;
} a.upload-img:hover {
background-color: #ec7e70;
} .tc {
text-align: center;
}
头像截取 图片上传 js插件的更多相关文章
- 图片上传JS插件梳理与学习
项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...
- 图片上传jQuery插件(兼容IE8)
图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg html <!DOCTYPE html> <ht ...
- 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor
百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...
- springMVC3 ckeditor3.6 图片上传 JS回调
一.引入js文件 <script type="text/javascript" src="<%=base %>/resources/ckeditor/c ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件
项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...
- 图片上传js
var imgURL; function getImgURL(node) { try{ var file = null; if(node.files && node.files[0] ...
- js截取图片上传(仅原理)----闲的无聊了代码就不共享了!写的难看,不好意思给你们看了(囧)
就算世界再坑爹,总有一些属性能带你走出绝望(伟大的absolute) 今天吐槽一下!......在我的世界里没有正统UI,所以效果图永远都是那么坑爹! 这里我要感谢有个position:absolut ...
- ASP.Net MVC3 图片上传详解(form.js,bootstrap)
图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...
随机推荐
- YaoLingJump开发者日志(八)V1.1版本完成
跳跃吧瑶玲下载连接 官网下载(网站服务器不支持10M以上的文件上传-_-||) 百度网盘下载 介绍 忙里偷闲,把之前的工作整理了一下完成V1.1版本,下面是更新! (1)去掉了积分榜. (2)增加 ...
- Linux命令之查看cpu个数_核数_内存总数
http://blog.csdn.net/cgwcgw_/article/details/10000053 cpu个数 cat /proc/cpuinfo | grep "physical ...
- RT-thread finsh组件工作流程
finsh是RT-Thread的命令行外壳(shell),提供一套供用户在命令行的操作接口,主要用于调试.查看系统信息.在大部分嵌入式系统中,一般开发调试都使用硬件调试器和printf日志打印,在有些 ...
- hdu5696区间的价值 -- 2016"百度之星" - 初赛(Astar Round2B)
Problem Description 我们定义“区间的价值”为一段区间的最大值*最小值. 一个区间左端点在L,右端点在R,那么该区间的长度为(R−L+1). 现在聪明的杰西想要知道,对于长度为k的区 ...
- 转:狄利克雷过程(dirichlet process )的五种理解
狄利克雷过程(dirichlet process )的五种理解 原文:http://blog.csdn.net/xianlingmao/article/details/7342837 无参数贝叶 ...
- 【题解】51nod1967 路径定向
第一次写欧拉回路,实际上只要dfs下去就可以了,反正每条边都是要遍历一遍的…… 关键有两个性质:1.一个无向图存在欧拉回路,当且仅当该图所有顶点度数都为偶数,且该图是连通图.2.一个有向图存在欧拉回路 ...
- ssm框架pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- SRM12 T2夏令营(分治优化DP+主席树 (已更新NKlogN)/ 线段树优化DP)
先写出朴素的DP方程f[i][j]=f[k][j-1]+h[k+1][i] {k<i}(h表示[k+1,j]有几个不同的数) 显然时间空间复杂度都无法承受 仔细想想可以发现对于一个点 i ...
- 差点AFO
差点就AFO了,小伙伴们一定注意护眼啊. 眼睛总算是活过来了. 还有一个月联赛,加油
- ExtJs在页面上window再调用Window的事件处理
今天在开发Ext的过程中遇到了一个恶心的问题,就是在ext.window页面,点击再次弹出window时,gridpanel中的store数据加载异常,不能正常被加载,会出现缓存,出现该问题,是因为w ...