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 相关文章推荐
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
javascript 回调函数详解
Nov 11 Javascript
Ajax基础知识详解
Feb 17 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 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截取中文字符串的问题
2006/07/12 PHP
PHP4.04简明安装
2006/10/09 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
jQuery之选择组件的深入解析
2013/06/19 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
js实现随机抽奖
2020/03/19 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
python求素数示例分享
2014/02/16 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
如何使用python代码操作git代码
2020/02/29 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
打架检讨书400字
2014/01/17 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
教师辞职书范文
2015/02/26 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书