cropbox
今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件。该插件适用于适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
实现的代码。
html代码:

<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>

css代码:

.container
{
position: absolute;
top: 5%;
left: 36%;
right: 0;
bottom: 0;
}
.action
{
width: 400px;
height: 30px;
margin: 10px 0;
}
.cropped > img
{
margin-right: 10px;
}

javascript代码:

$(window).load(function () {
var options =
{
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: 'images/avatar.png'
}
var cropper = $('.imageBox').cropbox(options);
$('#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[0]);
this.files = [];
})
$('#btnCrop').on('click', function () {
var img = cropper.getDataURL();
$('.cropped').append('<img src="' + img + '">');
})
$('#btnZoomIn').on('click', function () {
cropper.zoomIn();
})
$('#btnZoomOut').on('click', function () {
cropper.zoomOut();
})
});
cropbox的更多相关文章
- cropbox插件实现的头像裁剪效果
html代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
- Django使用cropbox包来上传裁剪图片
1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...
- 在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用
cropbox.js 是一个实现了图像在线剪裁的 jQuery .YUI 插件和 JavaScript 库. 上DEMO: 上传的图片可以使用滚轮放大与缩小当前选择的图片,后点击“裁切”后,在右侧的预 ...
- 基于jQuery头像裁剪插件cropbox
今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...
- jQuery实现用户头像裁剪插件cropbox.js
几乎每一个网页是必备图片上传,图片裁剪功能,这里通过cropbox.js插件实现该功能. <script src="js/jquery-1.11.1.min.js">& ...
- cropbox.js 头像裁剪插件
cropbox.js 一个轻量级和简单的JavaScript,Jquery,YUI插件来裁剪您的头像. 特征 支持dataUrl显示图像(函数getDataURL) 支持Blob上传图片(函数getB ...
- jQuery拖动剪裁图片作为头像
图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...
- HTML5 canvas处理图片的各种效果,包括放大缩小涂鸦等
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...
随机推荐
- MAC 打开Chrome打开开发者工具的快捷键
mac下safari和chrome打开开发者工具的快捷键相同,都是 option(alt)+command+i 这个是我的默认配置,没有更改过的.
- CentOS 6 Yum本地源配置
#cd /etc/yum.repos.d #rm CentOS-Base.repo CentOS-Base.repo 是yum 网络源的配置文件(默认) #vi CentOS-Media.repo C ...
- PAT 1121 Damn Single
"Damn Single (单身狗)" is the Chinese nickname for someone who is being single. You are suppo ...
- redis—持久化
Redis持久化 概述 Redis的强大性能很大程度上都是因为所有数据都是存储在内存中的,然而当Redis重启后,所有存储在内存中的数据将会丢失,在很多情况下是无法容忍这样的事情的.所以,我们需要将内 ...
- Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
- Introduction to TensorFlow
Lecture note 1: Introduction to TensorFlow Why TensorFlow TensorFlow was originally created by resea ...
- POJ 3101 大数+gcd
题目大意: 星星作圆周运动的周期给出,若已连成一条线,下一次所有星星在同一条线上的时间 用分数形式输出 这里我们可以利用追及问题来计算出两个星星之间连成一条直线的时间,也即速度快的星星追上速度慢的星星 ...
- H3c 配置ssh acl
http://www.h3c.com/cn/d_201108/723349_30005_0.htm
- HDU——3579 Hello Kiki
Hello Kiki Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- jconsole远程连接 jmx配置注意事项
由于在测试程序时需要收集程序运行时的内存,CPU等消耗情况.选择了jconsole这个jdk自带工具来观察.为了不影响程序运行状态,用远程连接的方式来具体观察. 首先,程序是放在ubutun系统服务器 ...