如何使用jQuery插件imgAreaSelect实现截图功能

这篇文章主要介绍了如何使用Jquery插件imgAreaSelect实现截图功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何使用jQuery插件imgAreaSelect实现截图功能文章都会有所收获，下面我们一起来看看吧。

一，准备：
两个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"  /></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"  /> </p> </div>

关于“如何使用jQuery插件imgAreaSelect实现截图功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何使用jQuery插件imgAreaSelect实现截图功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。