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实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
web打印小结
Jan 11 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
js消除图片小游戏代码
Dec 11 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
Vue 实现拨打电话操作
Nov 16 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学习教程之第2天
2008/06/15 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php对数组排序代码分享
2014/02/24 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
css3 transform属性详解
2014/09/30 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
服装设计专业自荐书范文
2013/12/30 职场文书
志愿者活动总结范文
2014/04/26 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
安全教育主题班会总结
2015/08/14 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript