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 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
vue组件与复用详解
2018/04/08 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python爬取个性签名的方法
2018/06/17 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
如何使用python代码操作git代码
2020/02/29 Python
python如何随机生成高强度密码
2020/08/19 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
运动会入场式解说词
2014/02/18 职场文书
优乐美广告词
2014/03/14 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
如何写早恋检讨书
2014/09/10 职场文书
高一化学教学反思
2016/02/22 职场文书