Filter实现的一个基于url的图片处理插件

1. 它是什么?

    这是一个非常简单的图片处理的插件,可快速集成在你的web应用中。基于http对图片进行缩略大小、质量压缩、旋转、转换扩展类型、添加水印等常用操作。
前台的图片尺寸发生变化的时候在前端修改url参数就好了,不用每次单独在后台去写一个尺寸常量,然后重新生成。

2. 如何使用?

    预览缩略图
        服务器有一个abc.png的图片大小为1024x800,现在想要300x230的比例图
            http://host:port/upload/abc.png?imageView/s/300x230 这个链接就ok了
            这里imageView是图片预览,后面的1是按大小缩放,300x230是缩放后的大小
        我想取一个512x400的图,就是原图的一半
            http://host:port/upload/abc.png?imageView/p/50
            这里的2是按比例缩放,50是缩放为原图的50%
    下载缩略图
        只需把imageView改为imageDown即可
    旋转图片
        http://host:port/upload/abc.png?imageView/r/180 这个链接就ok了
    添加水印
        待完成
    这里的参数顺序可以打乱的,imageView这个参数是请求显示还是下载(必须是第一个),后面的是处理图片参数(以键值对方式排列)
    …….

3. 快速集成

    1. 在web.xml中加入即可
    <filter>
        <filter-name>image-plugin</filter-name>
        <filter-class>org.unique.plugin.image.ImageFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>image-plugin</filter-name>
        <url-pattern>/upload/*</url-pattern>
    </filter-mapping>

    然后,就没有然后了。。。

4. 参数详解

图片预览
    http://xxxxx/abc.png?imageView/s/300x200/q/90
    http://xxxxx/abc.png?imageView/缩放类型/类型参数/压缩图片比例/比例参数
    缩放类型:1按大小缩放  2按比例缩放
    类型参数:类型为1后面跟widthxheight(当前这个不是强制压缩的会根据图片宽高比缩放),类型为2后面跟1-100的比例
    压缩图片比例:对图片的质量要求不高可以在这里处理(非必须)
    比例参数:1-100比例
图片下载参数和预览是一样的,imageView变成了imageDown,我没有考虑吧他变的很复杂做成可配置的,
因为这个插件只支持单机环境,分布式的话考虑别的架构,它非常的轻小。

图片旋转
    http://xxxxx/abc.png?imageView/r/180
    将图片abc旋转180度预览,参考范围(0-360)可以是负数
图片加水印
    待完成
当然如果你不喜欢这样的命名可以拿代码去改,这份代码完全开源。

来张pic

git地址:https://git.oschina.net/biezhi/image-plugin.git

同时有一款比较强大的图片处理filter http://www.jhlabs.com/ip/filters/index.html

主要是针对图片效果处理,如滤镜,黑白等。

时间: 2024-09-27 06:01:39

Filter实现的一个基于url的图片处理插件的相关文章

有没有一个js写的图片截图插件

问题描述 有没有一个js写的图片截图插件 求一个js写的图片截图插件,兼容ie8,ie9,实现无刷新上传, 解决方案 http://deepliquid.com/content/Jcrop.html 实现图片区域截取的,无刷新直接将选中的图片提交到iframe来上传就行了.ie10+才支持html5的formdata,可以用ajax来实现上传

autoIMG 基于jquery的图片自适应插件代码_jquery

为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破.而Qzone日志的图片在此进行了改进,onload完毕后才显示原图.我以前用onload写过一个小例子:http://www.planeart.cn/?p=1022 通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下: 复制代码 代码如下: // jQuery.autoIMG.js v0.2 // Tang Bin - http://plan

一个基于jQuery的图片翻转效果

据说,这是一个最近很流行的效果,新浪微博,腾讯微博,都用到了这种效果,本博开博时也追随潮流用上了这种效果,使用方法: 在你的大图链接中加入class="miniImg artZoom"例: <a class="miniImg artZoom" href="hey.jpg"><img title="Mr.Think" src="hey.jpg" alt="Zoom" /&

一个解析URL及图片地址的JS函数

js|函数 为BBS增加的解析函数,不知道有没有更好的方法,没看其它BBS的JS代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>BBS </TITLE><META NAME="Generator" CONTENT="EditPlus"><META N

一个基于jquery的图片切换效果_jquery

下面的代码对于学习jquery的朋友是个参考html代码: 代码 复制代码 代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht

推荐6款基于jQuery实现图片效果插件_jquery

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

基于jQuery的图片剪切插件_jquery

第一步:建立工作区间 首先,我们要位我们这个教程建立一个工作区间,建立如图所示的文件层次结构,以及新建相应的空文件. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

TimergliderJS 一个基于jQuery的时间轴插件_jquery

Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安

一个基于jQuery的树型插件(OrangeTree)使用介绍_jquery

OrangeTree 下载地址:OrangeTree 首先大家先看下演示吧! 首先声明本人美术功底比较差!这个样式大家就将就一下吧!我将这个无限级树型插件命名为桔子树,它主要就分为3个级别的节点: 首级菜单,就是树上的一级菜单 父级菜单,也就是下面还有节点的菜单 子级菜单,也就是下面没有节点的菜单 每个节点都可以用CSS控制其样式,详细请看下表: OrangeTree .OrangeTree 控件 .first_node 首级菜单的默认样式 .first_node_hover 首级菜单鼠标移上的