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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
Ant Design的Table组件去除
Oct 24 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
php实现购物车功能(上)
2020/07/23 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
JS的数组迭代方法
2015/02/05 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
高校学生干部的自我评价分享
2013/11/04 职场文书
医院检讨书范文
2014/02/01 职场文书
体育教师求职信
2014/06/30 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
vue elementUI批量上传文件
2022/04/26 Vue.js
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL