[Aliyun-ACP] 使用OSS对图片进行基本处理
实验概述
本实验以图片分享网站为原型。该网站拥有大量静态文件，作为一个图片分享平台，需要根据用户请求，实时地将用户的原图在线转换成需要的图片。本实验使用ECS作为Web服务端，使用OSS服务作为图片存储，解决了图片在线处理的问题。由于使用OSS的图片处理功能需要进行域名绑定，事先已将OSS bucket和指定的ECS Web服务器端进行域名绑定，并进行CNAME配置。配置完成后，即可通过ECS Web服务端域名访问OSS bucket保存的静态数据。
实验目标
完成此实验后，可以掌握的能力有：
1. 使用OSS Java SDK上传图片到OSS bucket；
2. 使用OSS Java SDK进行图片缩放和水印处理；
3. 使用域名访问OSS bucket中的原始图片和处理后的图片。
学前建议
1. 掌握Java语言的基本使用
2. 了解OSS API的基本概念
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.3 上传原始图片至OSS并查看
1. 本小节实验内容：登录开发服务器成功后，将开发服务器内的本地图片上传至阿里云对象存储OSS。
查看本地图片信息
2. 首先，用户远程登录到的ECS服务器，点击页面左侧的 实验资源 ，查看本实验提供的 图片分享网站－处 ECS服务器的 弹性IP ， 用户名 和 密码 。然后，在登录的Windows 界面中，依次点击左下角的 开始 和弹出的菜单栏右侧的 计算机 ，双击 本地磁盘C：，双击并进入 LAB_OSS 的文件目录下。查看当前目录中有一个图片文件 世界地图 。
说明：远程登录Windows系统ECS实例的详细步骤，请参考云中沙箱 帮助文档
双击 世界地图 图片文件，查看待处理图片信息。打开一张地球仪的图片，该图片为 1024*1024 像素。后续的实验步骤中将通过 OSS 图片处理对该原始图片进行缩放、增加水印等操作。
配置阿里云账号AK信息
3. 返回 Windows 桌面，双击桌面 Eclipse Committ… 图标，打开 Eclipse。等待 1，2 分钟后，进入 Eclipse 界面。
4. 打开 Conf.java 文件，修改如下信息：
· ACCESS_ID 的参数值修改为：云中沙箱 实验资源 中提供的 AK ID ；
· ACCESS_KEY 的参数值修改为：云中沙箱 实验资源 中提供的 AK Secret 。
完成修改，点击左上角 保存（左数第二个按钮），保存修改程序。此步骤是用于配置阿里云账号AK信息，从而可以通过AK对阿里云的服务进行访问和操作。
上传原始图片至OSS
5. 关于需要上传处理的原始图片说明：原始图片存放于阿里云对象存储 OSS 上，所以图片的上传实际是往 OSS 的 Bucket 上传的。 OSS 提供了多种类型的上传文件的方法，如使用单次 PUT 请求完成的 简单上传、使用网页表单直接上传的 表单上传、以及用于大文件上传的 分片上传（本实验使用简单上传）。OSS是使用 RESTful API 来操作的，所有的请求都是标准的 HTTP 请求。
6. 请将开发服务器桌面的 code.txt 文件中 //使用默认的OSS服务器创建OSSClient对象 和 //上传图片、//上传文件 部分的代码，拷贝到 WaterMark.java 对应位置中。该段代码上传原始图片到 OSS 的指定 Bucke t中，并生成访问该原始图片的 URI。
// 使用默认的OSS服务器创建OSSClient对象
OSSClient client = new OSSClient(Conf.ACCESS_ID, Conf.ACCESS_KEY);
//上传图片
uploadFile(client, Conf.BUCKET_NAME, objectName, uploadFilePath);
uri = Conf.URI + "/" + objectName;
System.out.println("原始图片URI为: "+ uri+"，请在本地浏览器中访问。 ");
以上代码中 uploadFile() 的具体实现见 WaterMark.java 中 //上传文件 部分的代码，采用了 OSS Java SDK 的 putObject() ，使用本地文件作为 Object 数据源进行简单上传。
// 上传文件
private static void uploadFile(OSSClient client, String bucketName, String key,String filePath)
throws OSSException, ClientException, FileNotFoundException {
File file = new File(filePath);
ObjectMetadata objectMeta = new ObjectMetadata();
objectMeta.setContentLength(file.length());
// 可以在metadata中标记文件类型
objectMeta.setContentType("image/jpeg");
System.out.println("开始上传文件"+filePath);
InputStream input = new FileInputStream(file);
client.putObject(bucketName, key, input, objectMeta);
System.out.println("上传成功!");
}
7. 点击顶层功能栏的 运行（第六个按钮），开始运行程序。弹出 Console 的程序运行界面中，若显示如下信息（灰色字体），则已将本地的 世界地图 图片文件上传到阿里云对象存储 OSS 上。
Started...
开始上传文件C:/LAB_OSS/世界地图.jpg
上传成功!
原始图片URI为: http://training.jiagouyun.com/世界地图xxxxxxx.jpg，请在本地浏览器中访问。
8. 在本地浏览器中输入上一步生成的 原始图片的URI ，显示出了与本地相同的图片，即通过域名 training.jiagoiuyun.com 访问 世界地图.jpg 的原始图片成功。
2.4 网站图片缩放处理
1. 本小节主要内容： 将阿里云对象存储 OSS 中的原始网站图片 1024*1024 像素缩略成 500*500 像素，并通过域名访问缩放后的网站图片。
2. 首先，请通过如下步骤，建立网站图片缩放规则。在开发服务器 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.5 网站图片水印处理
1. 本小节主要内容：对阿里云对象存储 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：文图混合水印。
2. 本实验在图片上打文字水印，就是在原图的基础上加上一段文字内容做为水印。以下 必须编码 是指必须是 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)。
3. 首先，通过如下操作步骤，建立网站图片水印处理规则。打开文件 WaterMark.java ，对相关代码进行查看和修改：
1）在 第37行 ，修改 place 参数的值为 法国卢浮宫（可自定义一个地点或者景点）。完成修改，点击 保存 。此步骤是输入增加水印显示的内容。默认图片增加的水印内容为 世界这么大，我想去看看：xxxxxx 。法国卢浮宫（修改的内容）取代 xxxxx 部分的内容。
2）请将开发服务器桌面的 code.txt 文件中 //设置水印参数 set watermark parameters 部分的代码，拷贝到 WaterMark.java 对应位置中。该段代码功能为：设置水印字体、大小、文字、颜色、位置、透明度并生成进行水印处理后的网站图片的 URI。
//设置水印参数 set watermark parameters
String watermark = "watermark=2"; // watermark type, 1=pic mark, 2=text mark;
String font_type = "&type=" + BinaryUtil.toBase64String("fangzhengheiti".getBytes());
String size = "&size=" + "30";
String text = "世界那么大, 我想去看看："+place;
text = "&text=" + BinaryUtil.toBase64String(text.getBytes());
String color = "&color=" + BinaryUtil.toBase64String("#FF0033".getBytes());
String position = "&p=" + "4";
String transparency = "&t=" + "70";
watermark = watermark + font_type + size + text + color + position + transparency;
String uri_watermark = uri +"@"+ watermark;
System.out.println("打水印后图片的URI为: "+ uri_watermark+"，请在本地浏览器中访问。 ");
4. 然后，点击顶层功能栏的 运行（第六个按钮），开始运行程序。弹出 Console 的程序运行界面中，若显示如下信息，则完成对网站图片打水印。
打水印后图片的URI为: http://training.jiagouyun.com/世界地图xxxxxxx.jpg@watermark=2&type=ZmFuZ3poZW5naGVpdGk=&size=30&text=5LiW55WM6YKj5LmI5aSnLCDmiJHmg7PljrvnnIvnnIvvvJrms5Xlm73nvZfmta7lrqs=&color=I0ZGMDAzMw==&p=4&t=70，请在本地浏览器中访问。
5. 最后，使用域名访问打水印的网站图片。打开本地浏览器，拷贝并粘贴上一步中 URI 中的内容到 网址输入栏 回车，读取 OSS 中存储处理后的图片。即在原有一张地球仪的图片上，添加红色的水印文字 世界这么大， 我想去看看：法国卢浮宫 。
2.6 网站图片多重处理
1. 本部分实验内容：为了能在一次访问中完成对图像的缩略和打文字水印两种处理，使用管道来实现多种处理任务顺序执行的机制。目前最多支持四级管道。管道的分隔符是 | 。
2. 首先，通过管道进行图片多重处理：请将开发服务器桌面的 code.txt 文件中 //设置管道参数 set pipe parameters 部分的代码（以下灰色字体）拷贝到 WaterMark.java 对应位置中。该部分代码在一次访问中完成对图像的缩略和打文字水印两种处理。
//设置管道参数 set pipe parameters
String pipe=thumbnail+"|"+watermark;
String uri_pipe=uri+"@"+pipe;
System.out.println("通过管道访问缩略和打水印双重处理后图片的URI为: "+ uri_pipe+"，请在本地浏览器中访问。 ");
2. 然后，点击顶层功能栏的 运行（第六个按钮），开始运行程序。弹出 Console 的程序运行界面中，若显示如下信息，则通过管道同时进行图片缩放和水印处理 世界地图 图片文件成功，并生成了相应处理后网站图片的 URI。
通过管道访问缩略和打水印双重处理后图片的URI为: http://training.jiagouyun.com/世界地图xxxxxxx.jpg@500w_500h.jpg|watermark=2&type=ZmFuZ3poZW5naGVpdGk=&size=30&text=5LiW55WM6YKj5LmI5aSnLCDmiJHmg7PljrvnnIvnnIvvvJrms5Xlm73nvZfmta7lrqs=&color=I0ZGMDAzMw==&p=4&t=70，本地浏览器中访问。
3. 最后，使用域名访问通过管道多重处理后的网站图片：打开本地浏览器，拷贝并粘贴上一步中 URI 中的内容到 网址输入栏 回车，读取通过管道同时进行缩放和打水印后的图片。即在缩放后的 500*500 的地球仪的图片上，添加红色的水印文字 世界这么大， 我想去看看：法国卢浮宫 。
String uri_pipe_download=uri+"@"+thumbnail+"%7C"+ watermark;//“%7C”是管道符“|”的转义字符
downloadFile(uri_pipe_download);
System.out.println("Finished...");
以上代码中 downloadFile() 的具体实现见如下的 //下载文件 代码。具体通过以下步骤获得处理后的图片，之后存入本地文件：
1）创建 HttpGet 对象，将要请求的 URL 通过构造方法传入 HttpGet 对象。
2）使用 DefaultHttpClient 类的 execute 方法发送 HTTP GET 请求，并返回 HttpResponse 对象。
3）通过 HttpResponse 接口的 getEntity 方法返回响应信息，并以给定的文件名字 旅游.jpg 存为本地文件。
private static void downloadFile(String uri)
throws OSSException, ClientException, ClientProtocolException, IOException {
DefaultHttpClient httpClient = new DefaultHttpClient();
HttpResponse response = httpClient.execute(new HttpGet(uri));
System.out.println("开始从OSS下载文件...");
byte[] result = EntityUtils.toByteArray(response.getEntity());
FileOutputStream fos = new FileOutputStream(new_pic_name);
3. 然后，点击顶层功能栏的 运行（第六个按钮），开始运行程序。弹出 Console 的程序运行界面中，若显示如下信息，则完成下载处理后的图片并保存到本地，其名称为 旅行.jpg 。
