位置:产品-图片缩放裁剪

1.概述

近两年来,很多社交网站对图片上传都提供了缩放和剪裁的功能.有些使用Flash实现,有些使用DHTML+JavaScript实现.

实现该功能并不是很复杂,开源邦成员也有一个基于GWT来开发的图像缩放和剪裁的小组件,特此把前端部分源码公开.考虑到后端大家都比较容易实现,因此不在此公开.

2.在线演示

本组件是纯的HTML+JavaScript,请单击在线演示即可试用.

3.下载

下载包是一个rar压缩文件,里面包含了GWT的源代码和演示用的HTML和CSS文件。

请单击下载[update date: 2010-02-22, size 93KB]后,解压即可.

4.文档

一、开发环境

    JDK1.6
    Eclipse3.5
     GWT2.0.2
     Google Plusin for Eclipse 1.20

二、部署代码说明

    1. war/GwtCropImg.html 运行页面文件
    2. war/GwtCropImg.css CSS样式文件
    3. war/gwtcropimg javascript文件所在的目录(包括了支持不同浏览器的js文件)

三、开发源代码说明

    1. src/openbang.web.cropimg.client/GwtCropImg.java 基于GWT编写的Java代码,编译后结果为gwtcropimg目录下的js文件.
    2. src/openbang.web.cropimg/GwtCropImg.gwt.xml GWT模块的声明文件

四、实现算法

    1.在 GwtCropImg.html 中通过各种文本框放置缩放剪裁图片的相关属性
    2.在 GwtCropImg.html 中只需要声明一个DIV(id=openbangimg_action_div),让 gwtcropimg目录下的JavaScript来控制图片的显示、缩放和拖动
     操作区是一个 AbsolutePanel (绝对位置的DIV)
     AbsolutePanel先放入图片(img对象)
     AbsolutePanel最后放入透明层(Table,实现四周半透明,中间区域透明)
    3.图片的缩放,利用 img 的width,height来实现
    4.图片的拖动,利用 透明层响应鼠标拖动的偏移量,重置img在 AbsolutePanel的起始位置.

五、使用说明

    当您想把图片的显示、缩放、拖动功能加入您的应用程序中
    1. 仿照GwtCropImg.html,修改您的代码
    2. 必须引入
    3. 必须保留页面中id以openbang开头的元素,并且不能改名.
    4. 这些id以openbang开头的元素中,button元素必须是button,不能改为intpu type=button, 文本框(type=text)和隐藏框(type=hidden)则可以根据需要互换
    5. GwtCropImg.html的javascript声明中,必须保留 openbangGetImgFileUrl方法.
    6. 所有元素遵守以上规则后,位置和样式可以自由设置.

5.RoadMap

该组件没有具体的开发计划

欢迎感兴趣的开发人员参与进来继续优化