0
点赞
收藏
分享

微信扫一扫

8,公有云实战——使用OSS对图片进行基本处理

使用OSS对图片进行基本处理

实验描述:本实验通过OSS JAVA SDK上传一张图片到OSS bucket中,然后进行图片缩放、打水印的操作,并使用域名访问OSS bucket中的原始图片和处理后的图片、下载处理后的图片至本地。

实验摘要:本实验以图片分享网站为原型。该网站拥有大量静态文件,作为一个图片分享平台,需要根据用户请求,实时地将用户的原图在线转换成需要的图片。具体通过使用OSS的Java SDK实现图片上传至OSS Bucket,对图片进行缩放、打水印及图片混合处理,及处理后的图片下载。

实验建议:具备基础的Java开发知识,了解OSS API的使用

实验特色:真实阿里云环境中去体会并了解OSS的SDK使用和图片处理功能

目标人群:开发人员

实验目标:帮助学员深刻理解如何使用OSS SDK来进行OSS图片处理。

背景知识

本实验以图片分享网站为原型。
该网站拥有大量静态文件,作为一个图片分享平台,需要根据用户请求,实时地将用户的原图在线转换成需要的图片。

本实验的架构使用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 服务器域名绑定;

8,公有云实战——使用OSS对图片进行基本处理_上传

4) ECS Web 服务器域名的 CNAME 配置为 CDN 加速域名。

8,公有云实战——使用OSS对图片进行基本处理_缩放_02

实验开始后

1)  系统自动创建一台 Windows 系统的 ECS 实例作为开发服务器

2)  远程登陆到 ECS 实例的 Windows 界面。然后,修改 Eclipse 中文件,实现使用 OSS Java SDK 上传本地图片到 OSS bucket 中,并进行图片缩放和水印处理

3)  通过域名访问原始图片和处理后的图片。

4)  下载处理后的图片

实验详情

实验资源:

8,公有云实战——使用OSS对图片进行基本处理_上传_03

根据实验资源登录子账号:

8,公有云实战——使用OSS对图片进行基本处理_服务器_04

8,公有云实战——使用OSS对图片进行基本处理_服务器_05


本小节实验内容:登录开发服务器成功后,将开发服务器内的本地图片上传至阿里云对象存储OSS。

1,查看本地图片信息

使用宿主机进行远程连接实验公网IP进行查看:

8,公有云实战——使用OSS对图片进行基本处理_服务器_06

8,公有云实战——使用OSS对图片进行基本处理_上传_07

双击 本地磁盘C:,双击并进入 LAB_OSS 的文件目录下。查看当前目录中有一个图片文件 世界地图

8,公有云实战——使用OSS对图片进行基本处理_上传_08

双击 世界地图 图片文件,查看待处理图片信息。打开一张地球仪的图片,该图片为 1024*1024 像素。

8,公有云实战——使用OSS对图片进行基本处理_上传_09

后续的实验步骤中将通过 OSS 图片处理对该原始图片进行缩放、增加水印等操作。

2,配置阿里云账号AK信息

返回 Windows 桌面,双击桌面 Eclipse Committ… 图标,打开 Eclipse。等待 1,2 分钟后,进入 Eclipse 界面

8,公有云实战——使用OSS对图片进行基本处理_服务器_10

8,公有云实战——使用OSS对图片进行基本处理_服务器_11

打开 Conf.java 文件,修改如下信息:

  • ACCESS_ID 的参数值修改为:云中沙箱 实验资源 中提供的 AK ID
  • ACCESS_KEY 的参数值修改为:云中沙箱 实验资源 中提供的 AK Secret

完成修改,点击左上角 保存(左数第二个按钮),保存修改程序。

此步骤是用于配置阿里云账号AK信息,从而可以通过AK对阿里云的服务进行访问和操作。

8,公有云实战——使用OSS对图片进行基本处理_缩放_12

进行修改:

8,公有云实战——使用OSS对图片进行基本处理_服务器_13

上传原始图片至OSS

关于需要上传处理的原始图片说明:原始图片存放于阿里云对象存储 OSS 上,所以图片的上传实际是往 OSS 的 Bucket 上传的。 
    OSS 提供了多种类型的上传文件的方法,如使用单次 PUT 请求完成的 [简单上传]使用网页表单直接上传的 [表单上传]以及用于大文件上传的 [分片上传]本实验使用简单上传)。
    OSS是使用 RESTful API 来操作的,所有的请求都是标准的 HTTP 请求。

请将开发服务器桌面的 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+",请在本地浏览器中访问。 ");

8,公有云实战——使用OSS对图片进行基本处理_缩放_14

以上代码中 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("上传成功!");
}

8,公有云实战——使用OSS对图片进行基本处理_服务器_15

点击顶层功能栏的 运行第六个按钮),开始运行程序。弹出 Console 的程序运行界面中,若显示如下信息(灰色字体),则已将本地的 世界地图 图片文件上传到阿里云对象存储 OSS 上

Started...
开始上传文件C:/LAB_OSS/世界地图.jpg
上传成功!
原始图片URI为: http://training.jiagouyun.com/世界地图xxxxxxx.jpg,请在本地浏览器中访问。

8,公有云实战——使用OSS对图片进行基本处理_缩放_16

8,公有云实战——使用OSS对图片进行基本处理_缩放_17

在本地浏览器中输入上一步生成的 原始图片的URI ,显示出了与本地相同的图片,即通过域名 training.jiagoiuyun.com 访问 世界地图.jpg 的原始图片成功

8,公有云实战——使用OSS对图片进行基本处理_服务器_18

3,网站图片缩放处理

本小节主要内容: 将阿里云对象存储 OSS 中的原始网站图片 1024*1024 像素缩略成 500*500 像素,并通过域名访问缩放后的网站图片。

首先,请通过如下步骤,建立网站图片缩放规则。在开发服务器 Windows 桌面的 code.txt 文件中 //设置缩放参数 set thumbnail parameters 部分的代码,拷贝到WaterMark.java 对应位置。该段代码功能为:对网站图片进行缩放并生成进行缩放处理后的网站图片的 URI。

//设置缩放参数 set thumbnail parameters
String width="xxx";  //输入500
String height="xxx";  //输入500
String thumbnail=width+"w_"+height+"h.jpg";
String uri_thumbnail = uri+"@"+thumbnail;
System.out.println("缩略后的网站图片的URI为: "+uri_thumbnail+",请在本地浏览器中访问。 ");

修改以上代码中 width 参数值的 xxx500 ,即缩略宽度是 500px

修改 height 参数值的 xxx500 ,即缩略高度为 500px,并保存

8,公有云实战——使用OSS对图片进行基本处理_上传_19

然后,点击顶层功能栏的 运行第六个按钮),开始运行程序。弹出 Console 的程序运行界面中,若显示如下信息,则已对原图进行缩略并生成了缩略后的网站图片的 URI。

8,公有云实战——使用OSS对图片进行基本处理_服务器_20

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 ,对相关代码进行查看和修改:

1)修改 place 参数的值为 法国卢浮宫(可自定义一个地点或者景点)。完成修改,点击 保存 。此步骤是输入增加水印显示的内容。默认图片增加的水印内容为 世界这么大,我想去看看:xxxxxx法国卢浮宫(修改的内容)取代 xxxxx 部分的内容。下面是我没有修改xxxxxx所以直接显示了x。

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+",请在本地浏览器中访问。 ");

8,公有云实战——使用OSS对图片进行基本处理_缩放_21

然后,点击顶层功能栏的 运行第六个按钮),开始运行程序。弹出 Console 的程序运行界面中,若显示如下信息,则完成对网站图片打水印。

打水印后图片的URI为: http://training.jiagouyun.com/世界地图xxxxxxx.jpg@watermark=2&type=ZmFuZ3poZW5naGVpdGk=&size=30&text=5LiW55WM6YKj5LmI5aSnLCDmiJHmg7PljrvnnIvnnIvvvJrms5Xlm73nvZfmta7lrqs=&color=I0ZGMDAzMw==&p=4&t=70,请在本地浏览器中访问。

8,公有云实战——使用OSS对图片进行基本处理_上传_22

最后,使用域名访问打水印的网站图片。打开本地浏览器,拷贝并粘贴上一步中 URI 中的内容到 网址输入栏 回车,读取 OSS 中存储处理后的图片。即在原有一张地球仪的图片上,添加红色的水印文字 世界这么大, 我想去看看:xxxxxx

8,公有云实战——使用OSS对图片进行基本处理_缩放_23

5,网站图片多重处理

本部分实验内容:为了能在一次访问中完成对图像的缩略和打文字水印两种处理,使用管道来实现多种处理任务顺序执行的机制。目前最多支持四级管道。管道的分隔符是 | 。

首先,通过管道进行图片多重处理:请将开发服务器桌面的 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+",请在本地浏览器中访问。 ");

8,公有云实战——使用OSS对图片进行基本处理_上传_24

然后,点击顶层功能栏的 运行第六个按钮),开始运行程序。弹出 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,本地浏览器中访问。

8,公有云实战——使用OSS对图片进行基本处理_缩放_25

最后,使用域名访问通过管道多重处理后的网站图片:打开本地浏览器,拷贝并粘贴上一步中 URI 中的内容到 网址输入栏 回车,读取通过管道同时进行缩放和打水印后的图片。即在缩放后的 500*500 的地球仪的图片上,添加红色的水印文字 世界这么大, 我想去看看:xxxxxx

8,公有云实战——使用OSS对图片进行基本处理_上传_26

6,下载处理后的图片至本地并查看

本小节主要内容:将上步使用管道对 OSS 的 Bucket 中的原图进行缩放和打水印双重处理后的图片保存到本地。图片服务的下载可以通过浏览器等发送 HTTP GET 请求图片的URL 即可获得图片。

首先,下载处理后的图片至本地。请将开发服务器桌面的 code.txt 文件中 //下载图片//下载文件 部分的代码(以下灰色字体)拷贝到 WaterMark.java 对应位置中。该部分代码将使用管道对 OSS 的 Bucket 中的原图进行缩放,和打水印双重处理后的图片,保存到本地的 C:/LAB_OSS 路径中,并命名为 旅行.jpg

注意%7C 是管道符 | 的转义字符。

//下载图片
String uri_pipe_download=uri+"@"+thumbnail+"%7C"+ watermark;//“%7C”是管道符“|”的转义字符
downloadFile(uri_pipe_download);
System.out.println("Finished...");

8,公有云实战——使用OSS对图片进行基本处理_服务器_27

以上代码中 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 {
        //send requests
        DefaultHttpClient httpClient = new DefaultHttpClient();
        HttpResponse response = httpClient.execute(new HttpGet(uri));
        System.out.println("开始从OSS下载文件...");
        //write to file
        byte[] result = EntityUtils.toByteArray(response.getEntity());
        FileOutputStream fos = new FileOutputStream(new_pic_name);
        fos.write(result);
        fos.flush();
        System.out.println("下载成功");
}

8,公有云实战——使用OSS对图片进行基本处理_上传_28

然后,点击顶层功能栏的 运行第六个按钮),开始运行程序。弹出 Console 的程序运行界面中,若显示如下信息,则完成下载处理后的图片并保存到本地,其名称为 旅行.jpg

8,公有云实战——使用OSS对图片进行基本处理_上传_29

8,公有云实战——使用OSS对图片进行基本处理_服务器_30

最后,在本地查看处理后的图片信息。依次点击 Windows 界面左下角的 开始 ,和点击右侧栏的 计算机 ,在打开的 计算机 窗体下,双击 本地磁盘C:,然后,双击并进入 LAB_OSS 的文件目录下。双击 旅行 图片文件

8,公有云实战——使用OSS对图片进行基本处理_缩放_31

8,公有云实战——使用OSS对图片进行基本处理_服务器_32

在打开的 旅行 图片页面中,可以查看到一张添加红色文字水印的地球仪的图片。证明已成功下载通过 OSS 处理后的 世界地图.jpg 图片,并已将其保存到本地 C:\LAB_OSS中,默认命名为 旅行.jpg 。注意其像素已被缩放至 500*500 像素。

举报

相关推荐

0 条评论