【转】如何实现javascript截图 jQuery插件imgAreaSelect使用详解
2010-09-10 13:14
363 查看
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是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 原文地址:http://www.biuuu.com/p189.html
一,准备:
两个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 原文地址:http://www.biuuu.com/p189.html
相关文章推荐
- 浅谈javascript对象、如何实现继承、jQuery方法的扩展(jquery插件)
- jQuery插件JQuery Pager分页器实现javascript分页功能
- jQuery插件JQuery Pager分页器实现javascript分页功能
- 如何用jquery插件实现生日日期选择
- 类似于花瓣、发现啦的 Chrome 的插件截图功能是如何实现的?具体的实现原理是什么?
- 写markdown博客如何将截图快速上传到图床——记一个工具插件的实现
- jQuery插件Magnify放大镜实现javascript图片放大功能
- jQuery插件Validation验证表单实现javascript表单智能验证功能
- javascript - 简单实现一个图片延迟加载的jQuery插件
- jQuery插件Datepicker日期选择器实现Javascript自定义日期时间选择功能
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- jQuery插件Font effect实现Javascript文字特效
- jQuery插件PrintArea实现javascript打印页面某区域功能
- jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- Java开发中网页截图的示例,采用jquery.imageaeraselect-0.9.10这个插件实现,自己详细测试过,可以使用。
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- jQuery插件jmodal模拟对话框实现javascript弹出对话框功能
- jQuery插件ReverseOrder实现Javascript倒序及了解prependTo函数
- 如何实现星星评价(jquery.raty.js插件)