javascript截图 jQuery插件imgAreaSelect使用详解


Posted in Javascript onMay 04, 2016

为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用。主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能。

一,准备:
两个JS文件
1,jquery.js 下载:jquery.js
2,jquery.imgareaselect.js 下载:jquery.imgareaselect.js[imgareaselect-0.6.2.zip]

二,使用

function preview(img, selection){ 
var scaleX = 100 / selection.width; 
var scaleY = 100 / selection.height;

//动态小头像 获取当前选中框的宽度,高度,左边框,右边框

$('#biuuu + div > img').css({ 
width: Math.round(scaleX * 400) + 'px', 
height: Math.round(scaleY * 300) + 'px', 
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
}); 
}


//加载小头像

$(document).ready(function () { 
$('<div><img src="biuuu.jpg" style="position: relative;" /></div>') 
.css({ 
float: 'left', 
position: 'relative', 
overflow: 'hidden', 
width: '100px', 
height: '100px' 
}) 
.insertAfter($('#biuuu')); 
});

//初始化加载

$(window).load(function () { 
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
});

三,调用

<div class="container"> 
<p> 
<img id="biuuu" src="biuuu.jpg" title="biuuu" style="float: left; margin-right: 10px;" /> 
</p> 
</div>

使用上面的javascript截图进行扩展可以实现很多的动态功能,jQuery提供的imgAreaSelect插件调用非常简单,其它相关应用可参考:imgAreaSelect Examples

使用jQuery插件imgAreaSelect实现javascript截图还是非常简单的,基本上就是一个动态的图像显示,获取源图片的位置和选取框的大小[宽度和高度],轻松实现javascript截图功能。

Javascript 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
js编写当天简单日历效果【实现代码】
May 03 #Javascript
javascript实现下雪效果【实例代码】
May 03 #Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 #Javascript
javascript的列表切换【实现代码】
May 03 #Javascript
jQuery中队列queue()函数的实例教程
May 03 #Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 #Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 #Javascript
You might like
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php导出生成word的方法
2015/12/25 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python 文件读写操作实例详解
2014/03/12 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python线程、进程和协程详解
2016/07/19 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python3离线安装Requests模块问题
2019/10/13 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
NULL是什么,它是怎么定义的
2015/05/09 面试题
客服服务心得体会
2013/12/30 职场文书
企业办公室岗位职责
2014/03/12 职场文书
春节联欢会策划方案
2014/05/16 职场文书
2014年质量工作总结
2014/11/22 职场文书
python字符串常规操作大全
2021/05/02 Python
你真的会用Mysql的explain吗
2022/03/31 MySQL