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截图功能。
相关推荐
-
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu
-
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果. 3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ["区域":是宽*高,也就是面积:] ["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数] 一.怎么能放大或者缩小图片的局部?
-
jQuery插件imgAreaSelect基础讲解
关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件 下载地址: 英文:http://odyniec.net/projects/imgareaselect/ 中文:http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html 在头部引用: <link rel="styl
-
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息? 其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一
-
jquery imgareaselect 使用利用js与程序结合实现图片剪切
复制代码 代码如下: /* 缺陷,当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到 需要在图片load函数里面初始化才可以 */ sanshi_imgareaselect = function(pic_id,view_div_id){ this.pic_obj = jQuery("#"+pic_id); this.pic_width; this.pic_height; this.view_d
-
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
<body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images
-
javascript截图 jQuery插件imgAreaSelect使用详解
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能. 一,准备: 两个JS文件 1,jq
-
关于JavaScript和jQuery的类型判断详解
对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});
-
jQuery插件ajaxFileUpload使用详解
ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201701/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能
-
jQuery插件编写步骤详解
本文实例讲述了jQuery插件编写步骤.分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下 面就是一个简单扩展Jquery
-
jQuery插件autocomplete使用详解
项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果. 1.
-
Javascript和jQuery的深浅拷贝详解
目录 JS的浅拷贝 JS的深拷贝 jQuery的深浅拷贝 总结 深浅拷贝在引用数据类型(数组对象)复制过程中产生的问题. JS的浅拷贝 直接复制拷贝的是数组/对象的内存地址,本质上是一个引用数据类型,所有的变量存储的是相同的内存地址,操作的是同一个存储空间,任意一个变量的操作,其他变量都会受影响.如下所示: const arr1 = ['北京', '上海', '广州', '深圳', '武汉']; const arr2 = arr1; console.log(arr1); console.log(
-
jQuery的图片轮播插件PgwSlideshow使用详解
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides
-
jQuery表单插件ajaxForm实例详解
前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t
-
jQuery Migrate 插件用法实例详解
jQuery Migrate是应用迁移辅助插件,是用于高级版本兼容低级版本辅助插件. 例如jQuery版本用的是1.x,计划升级到3.x,就可以在页面删除1.x版本,换成3.x版本,如果有脚本错误,就引入jquery-migrate插件用于兼容低版本,同时也显示低版本方法替换成新版本方法的方案. 例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>te
-
Bootstrap 折叠(Collapse)插件用法实例详解
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧! 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时,也需要在您的 Bootst
随机推荐
- PHP音乐采集(部分代码)
- VBS基础视频教程 批处理之家broly出品
- 读jQuery之十 事件模块概述
- 共创Linux桌面系统co-create 1.0.3光盘安装过程详细图解.htm
- DOS基本概念
- 配置Spring4.0注解Cache+Redis缓存的用法
- MUI 上拉刷新/下拉加载功能实例代码
- asp.net CheckBoxList各项最小宽度CSS样式(兼容性good)
- PHP防范SQL注入的具体方法详解(测试通过)
- 删除无限分类并同时删除它下面的所有子分类的方法
- PHP中类的自动加载的方法
- python读取注册表中值的方法
- Python cx_freeze打包工具处理问题思路及解决办法
- Android如何给按钮添加点击音效
- JS获取子、父、兄节点方法小结
- Python中用sleep()方法操作时间的教程
- java集合求和最大值最小值示例分享
- VBS教程:函数-IsDate 函数
- jQuery中on()方法用法实例
- jQuery右下角旋转环状菜单特效代码