阿里云云计算ACP实验考试之使用OSS对图片进行基本处理(上)

本文涉及的产品
对象存储 OSS,20GB 3个月
.cn 域名,1个 12个月
对象存储 OSS,内容安全 1000次 1年
简介: 阿里云云计算ACP实验考试之使用OSS对图片进行基本处理

实验概述


本实验以图片分享网站为原型。该网站拥有大量静态文件,作为一个图片分享平台,需要根据用户请求,实时地将用户的原图在线转换成需要的图片。本实验使用ECS作为Web服务端,使用OSS服务作为图片存储,解决了图片在线处理的问题。由于使用OSS的图片处理功能需要进行域名绑定,事先已将OSS bucket和指定的ECS Web服务器端进行域名绑定,并进行CNAME配置。配置完成后,即可通过ECS Web服务端域名访问OSS bucket保存的静态数据。


20200705212013479.png


实验目标


完成此实验后,可以掌握的能力有:


  1. 使用OSS Java SDK上传图片到OSS bucket;
  2. 使用OSS Java SDK进行图片缩放和水印处理;
  3. 使用域名访问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 服务器域名绑定;

20200705212121149.png


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


20200705212141404.png


实验开始后,


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


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


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


4) 下载处理后的图片


第 2 章:实验详情


2.1 实验资源


在弹出的左侧栏中,点击 创建资源 按钮,开始创建实验资源。 资源创建过程需要1-3分钟。完成实验资源的创建后,用户可以通过 实验资源 查看实验中所需的资源信息,例如:阿里云账号等


2.2 上传原始图片至OSS并查看


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


查看本地图片信息 2. 首先,用户远程登录到的ECS服务器,点击页面左侧的 实验资源 ,查看本实验提供的 图片分享网站-处 ECS服务器的 弹性IP , 用户名 和 密码 。 3.


20200705212245949.png


20200705212302663.png

然后,在登录的Windows 界面中,依次点击左下角的 开始 和弹出的菜单栏右侧的 计算机 ,双击 本地磁盘C:,双击并进入 LAB_OSS 的文件目录下。查看当前目录中有一个图片文件 世界地图 。


说明:远程登录Windows系统ECS实例的详细步骤,请参考云中沙箱 帮助文档

20200705212322848.png


双击 世界地图 图片文件,查看待处理图片信息。打开一张地球仪的图片,该图片为 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+",请在本地浏览器中访问。 ");

20200705212410633.png

修改以上代码中 width 参数值的 xxx 为 500 ,即缩略宽度是 500px ;修改 height 参数值的 xxx 为 500 ,即缩略高度为 500px,并保存。


20200705212429279.png

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

20200705212449306.png

4. 最后,使用域名访问缩放后的网站图片:在本地浏览器中输入上一步 缩略后的网站图片的URI ,显示出缩略后图片。


20200705212509475.png


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


相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
18天前
|
存储 人工智能 开发工具
AI助理化繁为简,速取代码参数——使用python SDK 处理OSS存储的图片
只需要通过向AI助理提问的方式输入您的需求,即可瞬间获得核心流程代码及参数,缩短学习路径、提升开发效率。
1247 3
AI助理化繁为简,速取代码参数——使用python SDK 处理OSS存储的图片
|
3月前
|
机器学习/深度学习 人工智能 专有云
人工智能平台PAI使用问题之怎么将DLC的数据写入到另一个阿里云主账号的OSS中
阿里云人工智能平台PAI是一个功能强大、易于使用的AI开发平台,旨在降低AI开发门槛,加速创新,助力企业和开发者高效构建、部署和管理人工智能应用。其中包含了一系列相互协同的产品与服务,共同构成一个完整的人工智能开发与应用生态系统。以下是对PAI产品使用合集的概述,涵盖数据处理、模型开发、训练加速、模型部署及管理等多个环节。
|
10天前
|
算法 Java Linux
java制作海报四:java BufferedImage 转 InputStream 上传至OSS。png 图片合成到模板(另一个图片)上时,透明部分变成了黑色
这篇文章主要介绍了如何将Java中的BufferedImage对象转换为InputStream以上传至OSS,并解决了png图片合成时透明部分变黑的问题。
20 1
|
18天前
|
存储 人工智能 缓存
AI助理直击要害,从繁复中提炼精华——使用CDN加速访问OSS存储的图片
本案例介绍如何利用AI助理快速实现OSS存储的图片接入CDN,以加速图片访问。通过AI助理提炼关键操作步骤,避免在复杂文档中寻找解决方案。主要步骤包括开通CDN、添加加速域名、配置CNAME等。实测显示,接入CDN后图片加载时间显著缩短,验证了加速效果。此方法大幅提高了操作效率,降低了学习成本。
2780 8
|
2月前
|
存储 JavaScript 前端开发
Vue中实现图片上传,上传后的图片回显,存储图片到服务器 【使用对象存储OSS】
这篇文章介绍了在Vue中实现图片上传到阿里云OSS对象存储服务的完整流程,包括服务端签名直传的前提知识、后端设置、前端组件封装以及图片上传和回显的效果展示。
|
2月前
|
存储 机器学习/深度学习 弹性计算
阿里云EMR数据湖文件系统问题之OSS-HDFS全托管服务的问题如何解决
阿里云EMR数据湖文件系统问题之OSS-HDFS全托管服务的问题如何解决
|
3月前
|
存储 运维 安全
阿里云OSS的优势
【7月更文挑战第19天】阿里云OSS的优势
169 2
|
3月前
|
存储 API 开发工具
阿里云OSS
【7月更文挑战第19天】阿里云OSS
151 1
|
3月前
|
运维 Serverless 对象存储
函数计算产品使用问题之如何配合OSS实现接口收到的图片或文件直接存入OSS
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
3月前
|
消息中间件 分布式计算 DataWorks
DataWorks产品使用合集之如何使用Python和阿里云SDK读取OSS中的文件
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。

热门文章

最新文章