jquery图片剪裁预览插件imgAreaSelect使用方法(第1讲)

在正式写代码之前,我想大家比较希望看到的是一个具备图片上传,然后出现预览图片这个效果,本文中暂时没有介绍图片上传这块,后面的文章会有上传+剪裁+预览合为一体的例子讲解,请耐心等待。我们先看基本用法。

首先,解压下载过来的插件包,保留css文件夹和scripts文件夹,其他的可以删掉,当然也可以保留,个人喜好而定。新建一个html文档,我这是第1讲,就叫做demo1.html吧,目录结构如下图所示:

我们打开这两个文件夹看看里面到底有啥宝贝。首先打开css文件夹,如图:

图中我们看到的有4个gif图片,这个是我们在选择区域时候看到的那个选取的边框的图片。两外3个css文件是操作选区时候一些样式的定义,一般我们使用default这个就行,当然,有兴趣的朋友也可以尝试使用另外两个css文件。接下来打开scripts文件夹,如图:

jquery.imgareaselect.js这个文件是一个开发用的文件,保留了基本的格式,开发者可以方便的对此文件进行修改或者扩展。

jquery.imgareaselect.min.js是对上面的开发包进行压缩过后的,也可以说是发行包。

jquery.imgareaselect.pack.js是对第一个文件压缩并混淆过的,压缩体积更小,方便网页的调用,但不适合开发。

jquery.min.js这个就不用说了吧,jquery的基础包。jquery的插件都依赖于这个基础包。

下面我们开始代码的编写。

使用文本编辑器打开demo1.html,写入基本的代码,引入需要的文件。

html代码:

<!doctype html>
<html>
<head>
	<title>imgAreaSelect demo1</title>
	<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  	<script type="text/javascript" src="scripts/jquery.min.js"></script>
  	<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
  	<script type="text/javascript">
  		//我的代码....
  	</script>
</head>
<body>
	
</body>
</html>

我要实现的是现在剪裁区域的最大宽度和最大高度的效果,所以,要有图片才行。好的,引入一张图片。

<img src="images/i.jpg" id="bigPicture" />

在js里面我们需要初始化插件,调用插件的imgAreaSelect方法(注意大小写),代码这样写:


$(document).ready(function(){
  	$("#bigPicture").imgAreaSelect({

  	});
});
最基础的代码就写好了,为了效果更加明显,我给图片加个边框


<img src="images/i.jpg" id="bigPicture" style="border:#000 1px solid;" />
来,看下效果吧:

未选择区域的时候

使用鼠标拖拽出一个矩形区域后的效果。

是不是很酷,但是!!这能帮我们做什么呢?对,这对于我们来说毫无用处。所以我们必须想办法让它变得对我们来说有点用。怎么办呢,很简单,API上有一些属性和方法,我们不妨试着调用一下看看效果如何。

aspectRatio,我们来设置这个属性看看。这个属性是用来设定选取的长宽比,比如说16:9的黄金比例,试试看:

$("#bigPicture").imgAreaSelect({
	aspectRatio:'16:9'
});
效果图:


所以,无论怎么拖拽选区的长宽比都是16:9的比例,下面我们来看handles这个属性,这个属性的值是true,false或者corners,当设置为true的时候,区域大小的调整手柄会出现在上下左右和四个角,设置为corners的时候手柄只会出现在角落,当设置为false的时候,不现实矩形状手柄,效果对比:

设置为true时候

设置为corners时候


当设置为false的时候

下面我们来看x1,y1,x2,y2这个属性,这个属性是用来设置选区的初始位置,四个值分别代表着两个个坐标。我们来试一下:

$("#bigPicture").imgAreaSelect({
		x1: 120,y1: 90,x2: 280,y2: 210
	});
效果图:


那接下来我们要做第三个效果,那就是限制最大的长和最大的宽

使用maxWidth和maxHeight来设定,当然也有最小宽度和最小高度,分别是minWidth和minHeight,这里只讲一个。

代码:


$("#bigPicture").imgAreaSelect({  
		maxWidth:100,maxHeight:200
	});
 效果图:


好的,今天就先讲这三个效果,后面再继续深入研究其他效果。

如果您觉得文章有帮助到您,请到 https://www.92ez.com/index.php?action=show&id=23403 进行打赏/捐赠,谢谢!
如果您觉得文章有帮助到您,请 使劲戳这里 进行打赏/捐赠,谢谢!
本文链接:https://www.92ez.com/?action=show&id=110
提示:技术文章有一定的时效性,请先确认是否适用你当前的系统环境。

上一篇: jquery图片剪裁预览插件imgAreaSelect使用方法(第0讲)
下一篇: 移动端webapp开发必备知识

访客评论
目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):