«

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

时间:2024-4-8 09:11     作者:韩俊     分类: Javascript


这篇文章主要介绍了如何使用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>

标签: javascript

热门推荐