实验三:使用OSS对图片进行基本处理-详情2-2.4

刘少
428
文章
24
评论
2020-11-0114:00:37 评论 2318字阅读7分43秒

提示: 实验资源会在固定时间后释放,请创建资源后尽快操作。

实验资源

 

第 1 章:实验背景

1.1 背景知识

第 2 章:实验详情

2.1 实验资源

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

2.3  网站图片缩放处理

2.4 网站图片水印处理

1. 本小节主要内容:对阿里云对象存储 OSS 中原始网站图片打上文字水印,并通过域名访问打上水印后的网站图片。关于水印操作的说明:水印操作可以在图片上设置另外一张图片或者文字做为水印。水印类型分成图片水印,文字水印,和文图混合水印。水印都可以使用如下参数:

1)t:透明度。如果是图片水印,就是让图片变得透明,如果是文字水印,就是让水印变透明。默认值:100, 表示 100%(不透明)。取值范围: [0-100]。
2)p:位置。参数意义:位置,水印打在图上的位置。默认值:9,表示在右下角打水印。取值范围:[1-9]。
3)x:水平边距, 就是距离图片边缘的水平距离, 这个参数只有当水印位置是左上,左中,左下, 右上,右中,右下才有意义。默认值:10,取值范围:[04096],单位:像素(px)。
4)y:垂直边距, 就是距离图片边缘的垂直距离, 这个参数只有当水印位置是左上,中, 右上,左下,中下,右下才有意义。默认值:10。取值范围:[04096]。单位:像素(px)。
5)voffset:参数意义: 中线垂直偏移,当水印位置在左中,中部,右中时,可以指定水印位置根据中线往上或者往下偏移。默认值:0取值范围:[-1000, 1000]。单位:像素(px)。
6)Watermark:选择水印的类型。取值范围 1, 2, 31:图片水印 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)。取值范围:(01000)。默认值:405)s:文字水印的阴影透明度,取值范围:(0,100)。

3. 首先,通过如下操作步骤,建立网站图片水印处理规则。打开文件 WaterMark.java ,对相关代码进行查看和修改:

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

实验三:使用OSS对图片进行基本处理-详情2-2.4

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

实验三:使用OSS对图片进行基本处理-详情2-2.4

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

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

实验三:使用OSS对图片进行基本处理-详情2-2.4

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

实验三:使用OSS对图片进行基本处理-详情2-2.4

 

继续阅读
  • 阿里云ACP认证交流群
  • 分享最新阿里云视频题库
  • weinxin
  • 我的淘宝店铺
  • 考试授权码最新包过题库
  • weinxin
  • 版权声明: 发表于 2020-11-0114:00:37
  • 转载注明:https://www.acpbk.com/1052.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: