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 相关文章推荐
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 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/10/09 PHP
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
开业庆典主持词
2014/03/21 职场文书
热门专业求职信
2014/05/24 职场文书
病房管理制度范本
2015/08/06 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
Win11查看设备管理器
2022/04/19 数码科技
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL