javascript截图 jQuery插件imgAreaSelect使用详解

前端之家收集整理的这篇文章主要介绍了javascript截图 jQuery插件imgAreaSelect使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

为了使用户自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是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]

二,使用

//动态小头像 获取当前选中框的宽度,高度,左边框,右边框

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' }); }

//加载小头像

') .css({ float: 'left',position: 'relative',overflow: 'hidden',width: '100px',height: '100px' }) .insertAfter($('#biuuu')); });

//初始化加载

三,调用

使用上面的javascript截图进行扩展可以实现很多的动态功能,jQuery提供的imgAreaSelect插件调用非常简单,其它相关应用可参考:imgAreaSelect Examples

使用jQuery插件imgAreaSelect实现javascript截图还是非常简单的,基本上就是一个动态的图像显示获取图片的位置和选取框的大小[宽度和高度],轻松实现javascript截图功能

猜你在找的jQuery相关文章