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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
提高 DHTML 页面性能
Dec 25 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
小程序server请求微信服务器超时的解决方法
May 21 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/01 无线电
php多层数组与对象的转换实例代码
2013/08/05 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
详解Python的Django框架中的templates设置
2015/05/11 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
给女儿的表扬信
2014/01/18 职场文书
手机促销活动方案
2014/02/05 职场文书
学校课外活动总结
2014/05/08 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
建筑安全责任书范本
2014/07/24 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
SQL注入详解及防范方法
2021/12/06 MySQL