如何实现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]
二,使用
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截图功能。
点我下载DEMO:javascript截图 imgAreaSelect插件demo
分享到:
相关推荐
javascript截图 jQuery插件imgAreaSelect用法详解_.docx
主要介绍了avascript截图 jQuery插件imgAreaSelect使用详解,需要的朋友可以参考下
这是利用jquery的imgareaselect进行截图的插件,使用代码请看我博客
jQuery插件imgAreaSelect 实例代码,自己实践后的代码,很简单的代码,完成了图片上传、剪切的功能,很不错,推荐。
jquery.imgareaselect-0.9.2封装jquery.imgareaselect-0.9.2封装jquery.imgareaselect-0.9.2封装
jquery的imgareaselect插件
基于jquery(imgareaselect)的网页截图插件,完整项目。可在eclipse中直接运行
imgAreaSelect_Demo 从官方的教程做了个
利用jquery的imgAreaSelect插件实现图片裁剪示例
jquery.imgareaselect-0.9.10图片裁切插件下载,可把上传的图片进行裁剪再保存,在以前来说非常棘手的问题,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现图片裁切功能。注,本插件包内不包括...
jquery_imgareaselect图片裁切插件使用的中文文档
jquery.imgareaselect-0.8.min.js
关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳、图片编辑等。下面通过本文给大家介绍jQuery插件imgAreaSelect基础讲解,需要的的朋友参考下吧
jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图
本篇文章主要对jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)的使用做了简要分析说明。需要的朋友来看下吧
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识;那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3...
使用JQuery ImgAreaSelect插件实现图片在线剪裁并保存到ASP.NET服务器端实例。
本篇文章主要对jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)的使用做了简要分析说明。需要的朋友来看下吧,希望对大家有所帮助
本篇文章主要对jQuery插件imgAreaSelect实现获得选择域的图像信息的方法做了简要分析说明。需要的朋友来看下吧,希望对大家有所帮助