据了解，大部分的用户对图片处理都不是很熟悉，或者说对于在发布图片前要调用专门的图片处理工具进行处理感到厌烦。

为更好地解决这个问题，本系统专门有针对的开发图片上传控件，集成了上述图片功能。而且这个控件是纯 js 的，不要用户安装插件，极大的方便了用户的使用！

3.1 图片上传编辑器的主界面介绍

图 3.1-1 图片上传编辑器主界面

如图3-1所示，就是本系统自带的图片上传编辑器的主界面。这里分三个区域：图片来源区、显示效果区、图片预览区。

3.1.1 图片来源区

图 3.1-2 图片来源区

用户可根据实际需要选择“上传”、“选择”或“网络”来设置需要上传、编辑或修改的图片的来源。

3.1.2 显示效果区

图 3.1-3 显示效果区

用户可根据实际需要，可在此区域对相应的图片添加一些显示效果，如添加说明文字、添加特殊效果、图片翻转、设置宽高、添加水印等效果。

3.1.3 图片预览区

图 3.1-4 图片预览区

用户上传打开相应的本地文件或选择打开相应的网络文件时，在这个区域都能预览该图片的显示效果图。在选择已上传的图片文件时，所能选择的图片也是显示在这里预览再选择的，如图：

图 3.1-5 选择相应的站内图片文件

除此之外，在编辑修改文件时，用户用鼠标控制图片的大小、移动水印文字与图片的位置等操作也是在这块区域中完成的。其中要注意的是如 图 3-4 中的红线及四个控制点，就是截取该图片显示或上传到站点的图片显示区域。你所上传或修改的图片最后只显示红线框内的部分，框外的将被去除。

3.2 举例说明：

3.2.1 截取图片的一部分上传

目的 ： 上传一张图片，并对其进行修改（只取其中一部分上传）。

操作步骤：

1、浏览并选择上传的文件 ：图片编辑器的图片来源区中点选“上传”前面的单选按钮，再按右侧的“ 浏览 ”按钮，弹出选择文件窗口：

图3.2-1 选择文件窗口

在自己的电脑中找出要上传的文件 112b 87c 557b.jpg ，选中，再单击该选择文件窗口右下角的“ 打开 ”按钮，就把要上传的文件选好了。此时图片编辑器右侧预览区中即可预览到该图片文件的图片内容：

图3.2-2 选中的图片显示在右侧预览区中

2、修改并截取风车图样 。这时，用户就可以在预览区中对图片进行修改并截取操作。拖动红色区域框的四个控制点，直到该区域与风车同大。如图：

图 3.2-3 截风车图片中的风车部分

3、按“确定”上传该图片。 按“确定”按钮后上传图片：

图 3.2-4 图片上传中

图 3.2-5 上传后在文章编辑状态下显示的图片效果

3.2.2 给图片加上简单的特殊效果

目的 ： 选择一张站内的图片，加上模糊效果。

操作步骤：

1 、选择一张站内的图片 ：图片编辑器的图片来源区中点选“选择”前面的单选按钮：

图 3.2-6 选择站内的图片

在此编辑器的右侧预览区将列出可选的相关站内图片若干，如 图 3.2.1-1 所示。现在以选择第二张为例。单击该图片后，编辑器显示变为：

图 3.2-7 选中一张站内图片

2 、给图片添加模糊的特殊效果 ：点击显示效果区的“特殊效果”右侧的选择框，会弹出相应的选项，选择其中的“模糊效果”，右侧预览区的图片就随之产生相应的模糊效果：

图 3.2-8 模糊效果的图片

3 、按“确定”完成修改 ：

如果对此效果满意，则可按“确定”按钮完成修改。

如还想再尝试几种特殊效果的处理，可接着操作第 2 步，直到满意为止。

另外，通过是否勾选图片来源区的“网络”下的“只改特效，不生成文件”项，来决定是否生成文件或不生成文件。如要生成文件，注意“确定”按钮上面一行出现的“覆盖原有文件”选项，如选中就是以现在添加特殊效果的图替代原来的图。如去掉勾选，则重新生成一个图片文件。

3.2.3 对图片进行翻转处理

目的 ： 选择一张站内的图片，对其进行翻转处理。

操作步骤：

1 、选择一张站内的图片： 请见 3.2.2 节中的第一点说明。

2 、对图片进行翻转处理：

可以在两处地方进行设置：“特殊效果”下的“垂直翻转”、“左右翻转”，“图片翻转”下的“右转 90 度”、“右转 180 度”、“右转 270 度”。当然也可以两项结合一起运用。

此项具体操作与 3.2.2 节中的第二点相似，请参考 3.2.2 节内容说明。

3 、按“确定”完成修改 。

3.2.4 给图片添加一些文字及图片水印效果

目的 ： 选择一张站内的图片，给它添加一些文字及图片水印效果。

操作步骤：

1 、选择一张站内的图片： 请见 3.2.2 节中的第一点说明。

2 、给图片添加文字及图片水印效果：

注意 ：当选择的是站内的图片时，在默认情况下，图片来源区的“网络”项都是勾选“只改特效，不生成文件”的，此状态下，“水印”设置是不可用的。不过只需去掉该选项的勾选就可以了。而本地上传的图片就没有此问题 。

为了方便介绍，现在给该图片添加“文字 / 图片 ” 的水印效果：在“水印”项选择“文字 / 图片 ” ：

图 3.2-9 水印效果设置区

设置“水印图片” ：单击“ 选择水印 ”按钮，弹出新的一个图片上传编辑器窗口，操作方法是一样的：上传图片或选择站内图片，设置相应的显示效果，有必要截图的，也可以对其进行裁剪操作，最后按“ 确定 ”完成设置：

图 3.2-10 完成水印图片选择后的效果图

设置文字水印 ：只需根据提示内容，对下面的文字水印设置区进行相应的设置，即可在右侧显示相应的设置效果。最后再在右侧拖动该文字效果到相应的位置即可。

图 3.2-11 再加上文字水印的效果图

3 、按“确定”完成修改 。

回顶部