实验概述
本实验以图片分享网站为原型。该网站拥有大量静态文件,作为一个图片分享平台,需要根据用户请求,实时地将用户的原图在线转换成需要的图片。本实验使用ECS作为Web服务端,使用OSS服务作为图片存储,解决了图片在线处理的问题。由于使用OSS的图片处理功能需要进行域名绑定,事先已将OSS bucket和指定的ECS Web服务器端进行域名绑定,并进行CNAME配置。配置完成后,即可通过ECS Web服务端域名访问OSS bucket保存的静态数据。
实验目标
完成此实验后,可以掌握的能力有:
- 使用OSS Java SDK上传图片到OSS bucket;
- 使用OSS Java SDK进行图片缩放和水印处理;
- 使用域名访问OSS bucket中的原始图片和处理后的图片。
第 1 章:实验背景
1.1 背景知识
本实验以图片分享网站为原型。该网站拥有大量静态文件,作为一个图片分享平台,需要根据用户请求,实时地将用户的原图在线转换成需要的图片。
本实验的架构使用ECS作为Web服务端,使用OSS服务作为图片存储,解决了图片在线处理的问题。由于使用OSS的图片处理功能需要进行域名绑定,事先已将OSS bucket和指定的ECS Web服务器端进行域名绑定,并进行CNAME配置。配置完成后,即可通过ECS Web服务端域名访问OSS bucket保存的静态数据。 使用该架构的 优势:
1) 实时在线处理图片并返回,无需下载图片
2) 因使用域名绑定,原有未使用阿里云系统的服务端代码可直接复用
3) 流量和存储费用节省,因OSS和ECS内网交互,OSS的存储费用低于ECS磁盘费用
用户 访问过程 如下:
1)用户向 ECS Web 服务端发起页面请求,请求转发至 CDN 加速域名,读取OSS bucket返回原始图片;
2)用户在 ECS 开发服务器上使用 OSS SDK 进行图片处理;
3)用户向 ECS Web 服务端发起页面请求,请求转发至 CDN 加速域名,读取OSS bucket返回处理后的图片。
实验开始前 ,已预先完成:
1) ECS Web 服务器部署;
2) OSS 服务开通及 bucket 创建;
3) OSS bucket 和 ECS Web 服务器域名绑定;
4) ECS Web 服务器域名的 CNAME 配置为 CDN 加速域名
实验开始后,
1) 系统自动创建一台 Windows 系统的 ECS 实例作为开发服务器
2) 远程登陆到 ECS 实例的 Windows 界面。然后,修改 Eclipse 中文件,实现使用 OSS Java SDK 上传本地图片到 OSS bucket 中,并进行图片缩放和水印处理
3) 通过域名访问原始图片和处理后的图片。
4) 下载处理后的图片
第 2 章:实验详情
2.1 实验资源
在弹出的左侧栏中,点击 创建资源 按钮,开始创建实验资源。 资源创建过程需要1-3分钟。完成实验资源的创建后,用户可以通过 实验资源 查看实验中所需的资源信息,例如:阿里云账号等
2.2 上传原始图片至OSS并查看
- 本小节实验内容:登录开发服务器成功后,将开发服务器内的本地图片上传至阿里云对象存储OSS。
查看本地图片信息 2. 首先,用户远程登录到的ECS服务器,点击页面左侧的 实验资源 ,查看本实验提供的 图片分享网站-处 ECS服务器的 弹性IP , 用户名 和 密码 。 3.
然后,在登录的Windows 界面中,依次点击左下角的 开始 和弹出的菜单栏右侧的 计算机 ,双击 本地磁盘C:,双击并进入 LAB_OSS 的文件目录下。查看当前目录中有一个图片文件 世界地图 。
说明:远程登录Windows系统ECS实例的详细步骤,请参考云中沙箱 帮助文档
双击 世界地图 图片文件,查看待处理图片信息。打开一张地球仪的图片,该图片为 1024*1024 像素。后续的实验步骤中将通过 OSS 图片处理对该原始图片进行缩放、增加水印等操作。
2.3 网站图片缩放处理
本小节主要内容: 将阿里云对象存储 OSS 中的原始网站图片 10241024 像素缩略成 500500 像素,并通过域名访问缩放后的网站图片。
首先,请通过如下步骤,建立网站图片缩放规则。在开发服务器 Windows 桌面的 code.txt 文件中 //设置缩放参数 set thumbnail parameters 部分的代码,拷贝到WaterMark.java 对应位置。该段代码功能为:对网站图片进行缩放并生成进行缩放处理后的网站图片的 URI。
//设置缩放参数 set thumbnail parameters String width="xxx"; String height="xxx"; String thumbnail=width+"w_"+height+"h.jpg"; String uri_thumbnail = uri+"@"+thumbnail; System.out.println("缩略后的网站图片的URI为: "+uri_thumbnail+",请在本地浏览器中访问。 ");
修改以上代码中 width 参数值的 xxx 为 500 ,即缩略宽度是 500px ;修改 height 参数值的 xxx 为 500 ,即缩略高度为 500px,并保存。
3. 然后,点击顶层功能栏的 运行(第六个按钮),开始运行程序。弹出 Console 的程序运行界面中,若显示如下信息,则已对原图进行缩略并生成了缩略后的网站图片的 URI。
4. 最后,使用域名访问缩放后的网站图片:在本地浏览器中输入上一步 缩略后的网站图片的URI ,显示出缩略后图片。
2.4 网站图片水印处理
本小节主要内容:对阿里云对象存储 OSS 中原始网站图片打上文字水印,并通过域名访问打上水印后的网站图片。关于水印操作的说明:水印操作可以在图片上设置另外一张图片或者文字做为水印。水印类型分成图片水印,文字水印,和文图混合水印。水印都可以使用如下参数:
1)t:透明度。如果是图片水印,就是让图片变得透明,如果是文字水印,就是让水印变透明。默认值:100, 表示 100%(不透明)。取值范围: [0-100]。 2)p:位置。参数意义:位置,水印打在图上的位置。默认值:9,表示在右下角打水印。取值范围:[1-9]。 3)x:水平边距, 就是距离图片边缘的水平距离, 这个参数只有当水印位置是左上,左中,左下, 右上,右中,右下才有意义。默认值:10,取值范围:[0 – 4096],单位:像素(px)。 4)y:垂直边距, 就是距离图片边缘的垂直距离, 这个参数只有当水印位置是左上,中, 右上,左下,中下,右下才有意义。默认值:10。取值范围:[0 – 4096]。单位:像素(px)。 5)voffset:参数意义: 中线垂直偏移,当水印位置在左中,中部,右中时,可以指定水印位置根据中线往上或者往下偏移。默认值:0取值范围:[-1000, 1000]。单位:像素(px)。 6)Watermark:选择水印的类型。取值范围 1, 2, 3,1:图片水印 2:文字水印,3:文图混合水印。
本实验在图片上打文字水印,就是在原图的基础上加上一段文字内容做为水印。以下 必须编码 是指必须是 url_safe_base64_encode ——URI 安全 base64 编码。
1)text:表示文字水印的文字,内容(必须编码)。注意:必须是URL安全base64编码 encodeText =url_safe_base64_encode(fontText) 最大长度为64个字符(即支持汉字最多20个左右)。 2)type:表示文字水印的文字类型(必须编码)。 3)color:文字水印文字的颜色(必须编码)。 4)size:文字水印文字大小(px)。取值范围:(0,1000)。默认值:40。 5)s:文字水印的阴影透明度,取值范围:(0,100)。
首先,通过如下操作步骤,建立网站图片水印处理规则。打开文件 WaterMark.java ,对相关代码进行查看和修改: