利用jQuery插件imgAreaSelect实现获得选择域的图像信息
还是先来分析一下:
(以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的)
如何获得选择域的图像信息? 其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少?
把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了。
(我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形))
大小:
这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小。(这个应该不难)
位置:
1.假设我们只告诉计算机,这个选择区域一个[起始点的坐标值],而且也告诉电脑这个区域的[面积]那么符合这两个条件情况有四:
“红色”为选择区域的起始点坐标;
A、B、C、D、为 以红色为起始点,画出的选择区域(每个区域的面积是相同的,起始点坐标也相同,却可以出来四种情况);
1.假设我们告诉计算机,这个选择区域两个坐标值,也告诉电脑区域面积:
“红色”为选择区域的起始点坐标,
“蓝色”为选择区域的横向结束点坐标值
"绿色"为选择区域的面积;
要同时满足这三个条件,只可能有一种情况
所以得出,我们要获得这个图像区域信息,就需要得到
以上三个值:两点坐标值,和一个面积值
$('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); $('#w').val(selection.width); $('#h').val(selection.height);
以上就是本文的全部内容,希望对大家有所帮助,感兴趣的朋友可以看下《利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)》和《利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)》,谢谢对我们的支持!
相关推荐
-
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
-
javascript截图 jQuery插件imgAreaSelect使用详解
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能. 一,准备: 两个JS文件 1,jq
-
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实现头像上传预览和裁剪功能实例讲解一
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu
-
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
<body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images
-
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果. 3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ["区域":是宽*高,也就是面积:] ["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数] 一.怎么能放大或者缩小图片的局部?
-
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息? 其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一
-
jQuery插件datepicker 日期连续选择
先上效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo
-
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
尤其是在当今各种浏览器满天飞(据说仅以IE为内核的浏览器就有200种之多). 小弟今天写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本.可识别各种浏览器的内核,并已经支持多种国内主流浏览器. 费话不多说,上我的JavaScript代码:(文件名:jquery.browsertype-1.0.js) 复制代码 代码如下: /** * jQuery插件开发方法二:第一步:插件定义 */ jQuery.myPlugin = { //获得浏览器的内核与外壳的类型和版本 Clie
-
使用jQuery插件创建常规模态窗口登陆效果
隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单.在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中. 我将演示如何利用jQuery插件leanModal建立一个常规模态窗口.如果你有MIT general license,那么这个插件是完全开源和免费的,我很喜欢这个插件,用起来相当
-
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自
随机推荐
- 详解Python之数据序列化(json、pickle、shelve)
- Java 操作Properties配置文件详解
- JavaWeb学习笔记分享(必看篇)
- PHP中过滤常用标签的正则表达式
- cmd if条件 条件判断
- oracle学习笔记(三)
- javascript 静态对象和构造函数的使用和公私问题
- js实现在文本框光标处添加字符的方法介绍
- javascript 三组文字间隙滚动实例代码
- YII视图整合kindeditor扩展的方法
- php中使用preg_match_all匹配文章中的图片
- 原生js实现新闻列表展开/收起全文功能
- Zen Coding css,html缩写替换大观 快速写出html,css
- JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
- Android自定义水波纹动画Layout实例代码
- 头文件不宜定义变量的原因全面解析
- jQuery fadeTo方法调整图片的透明度使用介绍
- jQuery中选择器的基础使用教程
- 获取当前网页document.url location.href区别总结
- for 循环性能比较 提高for循环的效率