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

相信大家都用过QQ的头像上传功能,修改QQ头像的时候可以对头像进行剪裁,在右边我们可以看到头像的预览图片。那这个功能用网页如何实现呢?接下来我们会一步步来实现这个超炫的功能。先上个QQ头像剪裁的截图:

[attach=2]

好了,我接下来就是要使用jquery的图片剪裁插件实现此功能。

先去插件官网下载最新的插件包,插件官网:http://odyniec.net/projects/imgareaselect/

我这里也上传了一份,大家可以直接下载。

[attach=3]

插件压缩包只有54K,GZip压缩后只有8K,挺小的,插件的官网上有一些实现的例子,不过是全英文的,而且都混在一起,看起来很吃力。我这里把那些例子单独的拆开,看的更清晰,也当作是个翻译吧。

插件官网上总结了一下插件的特点:

原文:

imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Plugin features:

  • Highly configurable
  • Customizable with CSS styling
  • Handles scaled images
  • Keyboard support for moving and resizing the selection
  • Supports callback functions
  • Provides API functions for easier integration with other application components
  • Lightweight — the packed version is just 8KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

译文:

imgAreaSelect

imgAreaSelect是一款可以在图片上选择矩形区域的JQuery插件。 它使得web开发者可以轻松地实现图像裁剪功能,以及其他用户界面特性,比如照片笔记(像Flickr)。



插件功能:

  • 高度可配置性
  • 自定义CSS样式
  • 处理并按比例缩小图像
  • 支持使用键盘移动和调整选择区域的大小和位置
  • 支持回调函数
  • 提供API函数,容易与其他应用程序组件集成
  • 轻量级-压缩的版本只有8 kb
  • 插件可以在所有主流浏览器上工作,包括Firefox 2 +,Opera 9.5 +,谷歌Chrome,Safari 3 +,Internet Explorer 6 +。
OK,今天的第0讲就先讲到这,主要对插件做个简单的介绍,下面一讲我将使用此插件实现限制剪裁区域最大宽和高的功能,今天就先到这了。




本文链接:https://www.92ez.com/?action=show&id=1000
!!! 转载请先联系non3gov@gmail.com授权并在显著位置注明作者和原文链接 !!! 小黑屋
提示:技术文章有一定的时效性,请先确认是否适用你当前的系统环境。

上一篇: 最近的状况
下一篇: jquery图片剪裁预览插件imgAreaSelect使用方法(第1讲)

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

评论内容 (必填):