jQuery实现拖动剪裁图片作为头像
更新时间：2016年12月28日 10:44:04 作者：计划
本文主要介绍了jQuery实现拖动剪裁图片作为头像的具体实例方法，具有很好的参考价值，下面跟着小编一起来看下吧
图片上传是许多网站的一个常用的功能，有时需要对上传的图片做初步的选择裁剪，比如上传头像。下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效，可以对选择要上传的图片做缩小、放大、拖动和裁剪，由何问起调试改进，有需要的朋友可以参考一下。在文后附有源码下载。
效果图：
需要引用的css文件为style.css，需要引用的js文件为jquery文件，可以到http://hovertree.com/h/bjaf/ati6k7yk.htm选择合适的版本下载，还需引用cropbox.js文件，这些文件在源码里面都有。
代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery拖动剪裁图片作为头像代码 - 何问起</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="hovertreecontainer">
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</div>
</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 class="cropped"></div>
</div>
<script src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/cropbox.js"></script>
<script type="text/javascript">
$(window).load(function() {
var options =
{
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: 'img/rgevo2ea.jpg'
}
var 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[0]);
this.files = [];
})
$('#btnCrop').on('click', function(){
var img = 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="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
$('.cropped').append('<img src="'+img+'" 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();
})
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjaf/7x8ev3fh.htm" target="_blank">说明</a></p>
</div>
</body>
</html>
源码下载：
http://wd.jb51.net:81//201612/yuanma/hovertreejqimg8_jb51.rar
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了jQuery对指定元素中指定字符串进行替换的方法,涉及jQuery针对字符串的匹配与替换的操作技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
下面小编就为大家带来一篇jQuery Ajax 实例代码 ($.ajax、$.post、$.get)。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
这篇文章主要介绍了jQuery下拉友情链接美化效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了利用jquery和BootStrap实现动态滚动条效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件
jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件，需要的朋友可以参考下2012-03-03
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
本文将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能。其实IE上有个方法可以实现点击复制，但是由于只是IE独有，所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能，关键是它兼容当前各主流浏览器。2015-04-04
本篇文章主要是对jquery ajax传递中文参数乱码问题及解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
DOM对象和jQuery对象的操作时很重要的，是jquery与页面元素互动的基础。2010-12-12
jQuery Easing Plugin 是一个简单的为对象扩展高级属性和选项的jQuery插件。2010-08-08
jQuery实现checkbox即点即改批量删除及中间遇到的坑
这篇文章主要介绍了jQuery实现checkbox即点即改批量删除及中间遇到的坑,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-11-11
最新评论