1.什么是ImageProcessor.Web

ImageProcessor.Web是基于ImageProcessor的web图像处理模块，允许开发者使用URL查询字符串参数的方式作为指令执行图像处理。

最新版有些问题，请大家使用4.5版本

2.常用功能

完整功能请参见官方文档：http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/

• Alpha

• 背景颜色
• 裁剪
• 格式转换
• 质量
• 调整大小

3.如何使用

3.1使用nuget引用

Web项目下，在包管理控制台输入以下命令，安装完成后就可以使用了，基本不用其它配置。

Install-Package ImageProcessor.Web

3.2各功能使用范例

下面我们将以一张图片为例，讲解一下常用功能的使用方式，更多功能请查看：http://imageprocessor.org/imageprocessor-web/

3.2.1Alpha

调整图像的透明度。将所需的百分比值（没有“%”）作为参数传递。

http://your-image?format=png&alpha=50

<iframe id="iframe_0.7783305803734537" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://jamessouth.me/images/imageprocessor/samples/balloon.jpg?width=600&_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.7783305803734537‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

<iframe id="iframe_0.7265004199426874" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://jamessouth.me/images/imageprocessor/samples/balloon.jpg?width=600&format=png&alpha=50&_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.7265004199426874‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

3.2.2背景颜色

改变当前图像的背景颜色。当固定当前图像大小时出现的背景颜色可指定颜色值，默认为黑色。

<!--Hex-->http://your-image?width=600&height=300&bgcolor=800080<!--RGBA-->http://your-image?width=600&height=300&bgcolor=128,0,128,255<!--Known Color-->http://your-image?width=600&height=300&bgcolor=purple

<iframe id="iframe_0.9643235211854737" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://jamessouth.me/images/imageprocessor/samples/beach.jpg?width=600&height=300&_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.9643235211854737‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

<iframe id="iframe_0.5512969285088551" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://jamessouth.me/images/imageprocessor/samples/beach.jpg?width=600&height=300&bgcolor=purple&_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.5512969285088551‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

3.2.3裁剪

将当前图像定位到给定的位置和大小。有两种模式可供选择：

1. 基于像素的-提供左上角坐标和新的宽度/高度。
2. 百分比-提供left, top, right, bottom的百分比（1和0之间）

http://your-image?crop=x,y,width,height

http://your-image?crop=left,top,right,bottom&cropmode=percentage

实例：http://your-image?width=400&crop=0,0,400,400&cropmode=percentage

<iframe id="iframe_0.042978251164558" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://imageprocessor.org/assets/img/originals/coffee.jpg?_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.042978251164558‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

<iframe id="iframe_0.6125867172085195" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://imageprocessor.org/assets/img/crop/coffee.jpg?_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.6125867172085195‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

3.2.4格式转换

调整当前图像的输出格式。

更多格式：http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/format/

http://your-image?format=png8

<iframe id="iframe_0.2855679644480167" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://imageprocessor.org/assets/img/originals/leaf.jpg?_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.2855679644480167‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

<iframe id="iframe_0.5073423200655505" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://imageprocessor.org/assets/img/format/gif/leaf.gif?_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.5073423200655505‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

3.2.5质量调整

改变当前图像的输出质量。这种方法会影响图像的输出质量。

http://your-image?quality=65

<iframe id="iframe_0.04512045682012067" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://imageprocessor.org/assets/img/originals/mana.jpg?_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.04512045682012067‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

<iframe id="iframe_0.6836062936982006" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://imageprocessor.org/assets/img/quality/mana.jpg?_=5883987%22%20style=%22border:none;max-width:1526px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.6836062936982006‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

3.2.6调整大小

调整图像尺寸大小。

更多参数查看：http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/

http://your-image?width=600&height=250

【推荐】ImageProcessor.Web，再也不用自己生成缩略图了