图片选区插件–基于imgareaselect插件

鼠标划取图片,并且生成一个图片的选取,并且获取选取相对于图片的位置以及大小,这个应该是算是比较常见的吧,用途什么的,也应该是可以想象,比如淘宝商品展示页面,当鼠标放到图片上时,会出现一个悬浮框,来实现选中部分的放大展示。当然,肯定还会有其他的功能的。这里就基于一个名叫imgAreaSelect的插件,实现上面说的一些功能。

imgAreaSelect插件

这是一个基于jQuery的插件,插件查看下载地址:imgAreaSelect

申明:因为在使用这个插件时,发现了些许问题,所以我在这里对这个插件的代码进行了修改,在写这篇文章之前,也有对这个插件的版权了解了下,是一个免费开源的插件,所以这里就把自己做的一些修改,以一篇文章的形式放在这里,如果有任何版权问题,请通知我,我会删除该篇文章。

上面这段说明,怎么我自己感觉,都有些二呢,不过用别人的东西,写自己的文章,总归有些心虚,所以还是二一下吧。

插件的用法:这个我觉得我也没有什么可说的,查看插件的文档说明吧:imgAreaSelect Documentation

还有文章最初提到的淘宝商品展示处,图片显示大图的效果,这里也可以直接看到,所以也不再提供实例:显示图片某一区域

说起来这个插件,我是还觉得不错,功能也算强大,图片操作需要的一些信息,都可以从这个插件中找到对应的API实现,只是这里却又一个问题存在,那就是:如果图片被旋转(就是使用上篇文中说到的transform属性进行图片的旋转:学习一下transform),那么这个时候,选取就不能正确的覆盖了。

下面就可以测试一下,旋转带来的问题了,当前模式的按钮颜色较深,比如默认的模式是,使用原始的版本,图片不旋转。点击图片下方的按钮,可以转换模式,然后进行图片的测试,为了正确的测试图片的选取,每改变一次模式,请重新对图片进行选取操作。

操作测试一下,是不是正确的进行了图片选区的显示,并且也获取到了选区的相关信息。如果您想查看源代码,可以直接从该页面中找出相应的代码,或者点击“demo”,这个页面是上面这个图片模块的一个单独的功能页面,实现的功能完全相同,直接ctrl+s保存该页面即可。

关于imgareaselect原文件的修改,只是添加了一个名称为setAngelNum的新方法,用来告诉插件,这个img图片是不是已经旋转了。

注:这里在我看来对于图片旋转的限制还有很多,这里只支持90度倍数的旋转,当旋转90度或者270度时,则setAngelNum传入的参数是1,如果是0度或者180度,则传入参数为0,至于其他参数,目前还不支持,以后慢慢研究,看是否会能支持任意参数旋转的图片区域选择。

OK效果的话,就是上面的效果了,如果您发现什么问题,请您指教。

本文地址: http://www.zhangyunling.com/?p=156

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>