jQueryh插件imgareaselect
1、插件介绍
imgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记、 图像编辑功能,等等。
2、基本用法(简单实例)
首先先调用imgareaselect-default.css、jquery-1.7.1.min.js、imgareaselect.pack.js这三个文件(官网下载的)
官网:http://odyniec.net/projects/imgareaselect/
<!--html-->
<div class="frame" style="margin: 0 0.3em; width: 500px; height: 467px;float:left;border:2px solid #dcdcdc;">
<img id="photo" src="../Images/img3.jpg" style="max-width:100%;max-height:100%;" />
</div> <div id="preview" style="width: 250px; height: 200px; overflow: hidden;border:2px solid #dcdcdc;">
<img src="../Images/img3.jpg" style="width: 250px; height: 200px;" />
</div>
function preview(img, selection) {
if (!selection.width || !selection.height)
return; var scaleX = 250 / selection.width;
var scaleY = 200 / selection.height;
var hei = $('#photo').height();
var wid = $('#photo').width();
$('#preview img').css({
width: Math.round(scaleX * wid),
height: Math.round(scaleY * hei),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
} $(function () {
$('#photo').imgAreaSelect({
//aspectRatio: '1:1',
handles: true,
fadeSpeed: 200, onSelectChange: preview
});
});
如果在jQuery对象里有不止有一个img元素,那么这个插件会对里面的元素逐个应用此方法。其实这个方法不仅仅应用于img元素,它支持任何块级元素(比如有图像背景的div元素)
实例效果图:
3、实例解析
效果图是通过onSelectChange()回调函数实现选择区域预览的效果。由于预览窗口是250x200px的,因此当截图窗口小于250px时,预览图会放大;当截图窗口大于250px时,预览图会缩小。
在preview()函数中,首先就定义了scaleX与scaleY,它们的内容就是250/selection.width(或height) ,也就是当selection.width小于250时,这个因子起放大作用,反之起缩小作用。
特别值得注意:回调函数中实际图的宽高(要根据实际情况调整!),回调函数中新图的宽高这些参数必须设置正确、否则会出现 选择偏差。(因为我自己的宽高是不定的,所以我是获取的)
jQueryh插件imgareaselect的更多相关文章
- jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...
- 关于jQuery插件imgAreaSelect基础讲解
关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件 下载地址: 英文:h ...
- jQuery插件ImgAreaSelect 实例讲解二
在上一篇随笔http://www.cnblogs.com/chenguanai/p/6883401.html中,已经了解了头像的上传预览和裁剪功能:那么这次就再看一下imgareaselect的裁剪功 ...
- JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)
前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.fla ...
- Java+jquery实现裁剪图片上传到服务器
大体分两步: 1.利用jquery裁剪图片,把裁剪到的几个点传入后端 2.利用前端传入的几个点,来裁剪图片 首先,用到一个jquery的插件 imgAreaSelect 实例及插件下载地址:http: ...
- ASP.NET MVC 网站开发总结(三) ——图片截图上传
本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> < ...
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...
- jQuery 图片剪裁插件使用之 imgAreaSelect
插件主页:http://odyniec.net/projects/imgareaselect/ 官方网站上说明支持的浏览器:The plugin works in all major browsers ...
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...
随机推荐
- 4月23日 db 命令操作 和表操作
1内容回顾: # 补充的知识点 # server端肯定是确定下来的 # mysql的客户端 # mysql.exe 直接在命令行就可以运行的 (学习阶段用) # navicat等可视化的客户端,是第三 ...
- ajax用户是否存在
$(function(){ $("#username").blur(function(){ var usernameInput=$(this).val(); $.post( &qu ...
- Maven捆绑TestNG实现测试自动化执行、部署和调度
一. 需求介绍 自动化测试,尤其是接口测试时,要写大量的测试用例,这些测试用例我们当然首选使用TesteNG编写,用例数量大,还涉及各种依赖包之类的问题,因此用Maven管理也是最方便最易实现的. 面 ...
- webpack踩坑--webpack 2.x升级至4.x
一.安装webpack-cli,webpack@4.26.1 1.npm install webpack-cli -D 2.npm install webpack@4.26.1 -D 二.踩坑 执行n ...
- php倒计时
<form name="form1"> <div align="center" align="center"> &l ...
- DOM函数和jQuery函数的覆盖与执行顺序
<script type="text/javascript"> window.onload = function () { alert(); } window.onlo ...
- shell中的常用条件判断
-e :该“文件名”是否存在.exit-d :该文件名是否为目录.dir-f :该文件名是否为普通文件.file -b:该文件是否为块文件.block -r :该文件是否具有可读属性 read-w ...
- springboot 不同环境切换不同的配置文件
开发的流程是本地>测试>预发布>正式,所以不同的环境,肯定是不同的配置文件,所以我们需要针对不同的环境做不同的配置切换. 下面我们来说说 springboot 是怎么来切换的: 1. ...
- 接口测试工具之Postman笔记
根据学习内容对Postman进行的个人总结,对于Postman说明.安装方法等说明性文字就不赘述了. 下面是页面中元素的和输入说明: New collection:集合可以把同一平台.系统,或功能的接 ...
- Docker基础知识介绍
本节内容 1. Docker概述 2. Docker的安装 3. Docker基本使用 4. Docker相关命令汇总 5. Docker概念理解 一 Docker概述 Docker是什么 ...