cropbox插件实现的头像裁剪效果
html代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
<title>Tinny Cropper</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style>
.container
{
position: absolute;
top: 10%; left: 10%; right: 0; bottom: 0;
}
.action
{
width: 400px;
height: 30px;
margin: 10px 0;
}
.cropped>img
{
margin-right: 10px;
}
</style>
</head>
<body> <script src="../cropbox.js"></script>
<div class="container">
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</div>
</div>
<div class="action">
<input type="file" id="file" style="float:left; width: 250px">
<input type="button" id="btnCrop" value="Crop" style="float: right">
<input type="button" id="btnZoomIn" value="+" style="float: right">
<input type="button" id="btnZoomOut" value="-" style="float: right">
</div>
<div class="cropped"> </div>
</div>
<script type="text/javascript">
window.onload = function() {
var options =
{
imageBox: '.imageBox',
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: 'avatar.png'
}
var cropper;
document.querySelector('#file').addEventListener('change', function(){
var reader = new FileReader();
reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = new cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
document.querySelector('#btnCrop').addEventListener('click', function(){
var img = cropper.getDataURL()
document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';
})
document.querySelector('#btnZoomIn').addEventListener('click', function(){
cropper.zoomIn();
})
document.querySelector('#btnZoomOut').addEventListener('click', function(){
cropper.zoomOut();
})
};
</script> </body>
</html>
css样式
.imageBox
{
position: relative;
height: 400px;
width: 400px;
border:1px solid #aaa;
background: #fff;
overflow: hidden;
background-repeat: no-repeat;
cursor:move;
} .imageBox .thumbBox
{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
box-sizing: border-box;
border: 1px solid rgb(102, 102, 102);
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
background: none repeat scroll 0% 0% transparent;
} .imageBox .spinner
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
line-height: 400px;
background: rgba(0,0,0,0.7);
}
js代码
/**
* Created by ezgoing on 14/9/2014.
*/
'use strict';
var cropbox = function(options){
var el = document.querySelector(options.imageBox),
obj =
{
state : {},
ratio : 1,
options : options,
imageBox : el,
thumbBox : el.querySelector(options.thumbBox),
spinner : el.querySelector(options.spinner),
image : new Image(),
getDataURL: function ()
{
var width = this.thumbBox.clientWidth,
height = this.thumbBox.clientHeight,
canvas = document.createElement("canvas"),
dim = el.style.backgroundPosition.split(' '),
size = el.style.backgroundSize.split(' '),
dx = parseInt(dim[0]) - el.clientWidth/2 + width/2,
dy = parseInt(dim[1]) - el.clientHeight/2 + height/2,
dw = parseInt(size[0]),
dh = parseInt(size[1]),
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, 0, 0, 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 = 0; 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();
}
},
attachEvent = function(node, event, cb)
{
if (node.attachEvent)
node.attachEvent('on'+event, cb);
else if (node.addEventListener)
node.addEventListener(event, cb);
},
detachEvent = function(node, event, cb)
{
if(node.detachEvent) {
node.detachEvent('on'+event, cb);
}
else if(node.removeEventListener) {
node.removeEventListener(event, render);
}
},
stopEvent = function (e) {
if(window.event) e.cancelBubble = true;
else e.stopImmediatePropagation();
},
setBackground = function()
{
var w = parseInt(obj.image.width)*obj.ratio;
var h = parseInt(obj.image.height)*obj.ratio; var pw = (el.clientWidth - w) / 2;
var ph = (el.clientHeight - h) / 2; el.setAttribute('style',
'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)
{
stopEvent(e); obj.state.dragable = true;
obj.state.mouseX = e.clientX;
obj.state.mouseY = e.clientY;
},
imgMouseMove = function(e)
{
stopEvent(e); if (obj.state.dragable)
{
var x = e.clientX - obj.state.mouseX;
var y = e.clientY - obj.state.mouseY; var bg = el.style.backgroundPosition.split(' '); var bgX = x + parseInt(bg[0]);
var bgY = y + parseInt(bg[1]); el.style.backgroundPosition = bgX +'px ' + bgY + 'px'; obj.state.mouseX = e.clientX;
obj.state.mouseY = e.clientY;
}
},
imgMouseUp = function(e)
{
stopEvent(e);
obj.state.dragable = false;
},
zoomImage = function(e)
{
var evt=window.event || e;
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta;
delta > -120 ? obj.ratio*=1.1 : obj.ratio*=0.9;
setBackground();
} obj.spinner.style.display = 'block';
obj.image.onload = function() {
obj.spinner.style.display = 'none';
setBackground(); attachEvent(el, 'mousedown', imgMouseDown);
attachEvent(el, 'mousemove', imgMouseMove);
attachEvent(document.body, 'mouseup', imgMouseUp);
var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
attachEvent(el, mousewheel, zoomImage);
};
obj.image.src = options.imgSrc;
attachEvent(el, 'DOMNodeRemoved', function(){detachEvent(document.body, 'DOMNodeRemoved', imgMouseUp)}); return obj;
};
cropbox插件实现的头像裁剪效果的更多相关文章
- 基于jQuery头像裁剪插件cropbox
今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
- 第三百九十节，Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传
第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传 实现原理 前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...
- 用JQuery仿造QQ头像裁剪功能
最近工作真心忙碌,几乎没时间写博客.今天趁周末来仿一个QQ头像裁剪功能插件.效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了9个HTML文件,每个步骤文件里的注释都写的 ...
- springMVC 头像裁剪上传并等比压
第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对 假设是ie下图片预览效果是滤镜做的 做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传 ...
- js插件---强大的图片裁剪Cropper
js插件---强大的图片裁剪Cropper 一.总结 一句话总结:官网或者github里面的文档或者demo才是真的详细 使用的话找到图片裁剪后的base64数据,然后这个数据可下载可传递到服务器 1 ...
- Cesium专栏-裁剪效果（基于3dtiles模型，附源码下载）
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- Django使用cropbox包来上传裁剪图片
1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...
- jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
随机推荐
- 浏览器缓存相关http头
近期看雅虎黄金34条,学习下优化站点性能的方法. 当中有一条:"为文件头指定Expires或Cache-Control",详细来说指对于静态内容:设置文件头过期时间Expires的 ...
- paip.c++ qt 目录遍历以及文件操作
paip.c++ qt 目录遍历以及文件操作 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/a ...
- BestCoder Round #14 B 称号 Harry And Dig Machine 【TSP】
称号:Harry And Dig Machine 哈哈 最终涨边粉色了,不easy呀.顺便写一道题解吧 题意:给一个m*n的矩阵,然后当中最多由10个有值,求总左上角把全部的值都拿上回到左上角的最小 ...
- Reflux 使用教程
Reflux是根据React的flux创建的单向数据流类库.Reflux的单向数据流模式主要由actions和stores组成.例如,当组件list新增item时,会调用actions的某个方法(如a ...
- Velocity.js发布：更快的动画切换速度
Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...
- Oracle Golden Gate - 概念和机制 (ogg)
Golden Gate(简称OGG)提供异构环境下交易数据的实时捕捉.变换.投递. OGG支持的异构环境有: OGG的特性: 对生产系统影响小:实时读取交易日志,以低资源占用实现大交易量数据实时复制 ...
- jq操作cookie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Servlet开发(一)
一.Servlet简介 Servlet是sun公司提供的用于开发动态web资源的技术.Sun公司在其API中提供了一个Servlet接口,用户若想开发一个动态web资源(即开发一个java程序向浏览器 ...
- Ecsotre 参考
2.dbschema dbschema 字段属性 ‘type’ => ‘int unsigned’, //字段类型 ‘extra’ => ‘auto_increment’,//定义自增 ‘ ...
- Python之路第八天，基础(9)-面向对象(下)
类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对象的 ...