记录一下阿里oss的图片加水印问题

最新推荐文章于 2025-05-27 15:42:39 发布

原创

最新推荐文章于 2025-05-27 15:42:39 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文详细记录了如何在阿里云OSS中给图片添加水印，包括上传水印图片到Bucket，创建数据处理样式，以及前端如何调用带水印的图片URL。由于OSS水印功能限制，当需要不同规格水印时，可能需要前端根据图片大小动态选择合适的水印。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览下载都要求有水印

1.先要在Bucket上传水印图片，一般是没有底色的png图片

2.Bucket数据处理里新建样式,注意图二的水印链接要填Bucket里存储的文件名

3.样式选择刚才设置的样式

4.前端调用的时候，复制的url就是

https://xxxxxx.oss-cn-sh.aliyuncs.com/202009114.png?x-oss-process=im

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

andy267

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

阿里云Oss水印图片处理Utils

qq_38795959的博客

06-23

3927

package com.ciip.cloud.core.usercenter.utils; import sun.misc.BASE64Encoder; /** * Title: WaterMarkUtils * Description: 阿里云Oss水印图片处理 * * @author * @created 2019/5/22 11:36 */ public class W...

使用 golang 以及 Gin 框架，将上传的图片在不保存至本地的情况下添加水印，并上传至阿里云 OSS

仗剑行于江湖，执笔记江湖事。

03-30

1710

正如标题所述，使用golang对上传图片添加水印，以及将图片上传到阿里云OSS，网上一搜索，便有你想要的结果了，可是，他们却先将上传图片添加水印后保存在本地，而后再将添加了水印的图片上传到阿里云OSS。这无疑是暂时占用了你电脑的磁盘空间（这里说是暂时，因为你可以通过程序对上传到阿里云OSS成功的图片进行删除），即便是这样，它也是消耗了磁盘读写操作，虽然人类是察觉不到这么细微的变化。然而，作为技术人员的我们（不介意我这么称呼自己吧！），使能够Review出这段程序的问题。

参与评论您还未登录，请先登录后发表或查看评论

阿里云oss对象存储：给图片添加（多行）文字图片水印

夏已微凉、

04-13

2366

一、说明二、php代码三、加图片水印四、加多行文字水印1、说明2、图片效果 - 水印前3、图片效果 - 水印后一、说明拼接阿里云 oss 的图片地址文档对象存储 OSS 图片处理对象存储 OSS 图片水印 OSS图片处理6.0 二、php代码 public function test() { $url = !empty($_REQUEST['url']) ? $_REQUEST['url'] : 'jpg,png,gif,jpeg...结尾的 oss图片地址'; .

Spring Boot + 阿里云OSS 实现智能水印系统

最新发布

qq_41788204的博客

05-27

1073

本文介绍了一个基于Spring Boot的智能水印处理系统，采用前后端分离架构，集成阿里云OSS云存储。系统核心技术包括：1）前后端分离设计，使用RESTful API规范；2）阿里云OSS集成架构，具备容错机制和签名URL功能；3）核心图像处理技术，支持Java原生图像处理和Python脚本扩展。项目实现了图片水印添加、合成等功能，提供完整的API接口和统一响应格式，适用于各类数字内容管理场景，具有高度的可扩展性和稳定性。

AliOSS 图片水印简单处理

Purgatory001的博客

04-16

1108

$data = str_replace(array('+', '/', '='), array('-', '_', ''), $data);

阿里云OSS存储的视频如何加水印

。

03-23

1205

OSS是不能进行视频添加水印的，可以图片添加水印。您可以在视频点播中进行配置： https://help.aliyun.com/zh/vod/user-guide/video-watermarks?spm=a2c4g.11186623.0.i2 原来的业务代码都是使用python 对oss的视频进行上传的,上传的视频路径已经保存到了数据库中了，视频点播不太熟悉, 视频点播转码加水印的服务贵么, 贵的话，就直接使用python对原视频加水印在上传到阿里云oss对象存储了，目前阿里云oss只可以对图

快速学习阿里云OSS存储-添加水印

逍遥云恋

01-18

2849

2.6、添加水印 OSS提供了在线添加水印功能，下面我们来体验下该功能：自定义规则：访问地址：https://itcast-haoke.oss-cn-qingdao.aliyuncs.com/images/2018/11/17/15423895180629907.jpg!sh uiyin 可以看到水印已经添加到图片中了。 ...

阿里云oss图片处理

05-21

它能够为用户提供高效、稳定、安全的图片处理能力，支持海量图片的存储及多种图片处理需求，如缩略图生成、水印添加等。通过简单的RESTful API，用户可以在任意时间、任意地点、任意设备上对图片进行处理。 #### 二...

summernote集成前端oss上传图片到阿里云服务器

03-22

在现代Web应用中，富文本编辑器如Summernote经常被用来提供用户友好的内容编辑体验。...在实际开发中，根据具体需求，还可以进一步优化和定制上传流程，比如添加图片裁剪、水印等功能，以满足更多样化的应用场景。

阿里云OSS添加水印

a201692的博客

04-22

1646

阿里云oss 水印

php上传图片到阿里oss加水印,element-ui 自定义上传图片添加水印并上传至oss

weixin_32137855的博客

03-23

524

随手笔记，这里我仅仅只是满足需求而封装的，如需使用还需要改进，这里只记一下方法。在utils.js里封装打文字水印的方法/*** 图片路径转成canvas* @param {图片url} url*/async function imgToCanvas(url) {// 创建img元素const img = document.createElement('img');img.src = url;im...

php实现图片上传时添加文字和图片水印技巧

10-22

主要为大家详细介绍了php实现图片上传时添加文字和图片水印技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

oss水印php方法,上传oss 给图片添加水印

weixin_42713608的博客

03-24

698

废话不说直接上代码亲测有效业务层代码public String uploadImage(MultipartFile file,String sn){if(file==null|| StrUtil.isEmpty(sn)){return ApiResult.error("传入参数不能为空");}try (InputStream inputStream=file.getInputStream();...

阿里云OSS 跨域访问规则设置(引用阿里云OSS的图片网址，显示不出来)

php菜鸟技术天地

01-05

1168

Etag x-oss-request-id

阿里云OSS添加水印名称报错

qq_1141193930的博客

09-02

464

base64编码后名称还是报错，是因为编码后的字符串带有 “/”把 “/”替换成“_”即可

阿里oss图片处理使用图片水印

qq_41277759的博客

11-27

1216

然后将这一段路径转换为base64字符串得到类似’ZWR1L2ltYWdlcy8yMDIzMTEyMy9hYWFhLmpwZw==‘的一段话。然后在你要渲染的图片路径后加'?x-oss-process=image/watermark,image_转换后的base64字符串'转换方法：将图片在你oss里的路径直接复制，去掉域名只留下路径即可。只留下：edu/images/20231123/图片名.jpg即可。首先你要拿到作为水印的图片base64字符串。这就是你水印图片的base64字符串。

阿里云OSS上的图片添加水印

weixin_43652507的博客

03-24

5730

阿里云OSS上的图片添加水印

阿里云 OSS 图片水印

Oneby的博客

02-06

3069

阿里云 OSS 图片水印 1、参考资料对象存储 OSS 图片水印 Java 正则表达式正则表达式中的$1, $2, …的含义正则表达式中的$1,$2 2、前言最近无意间发现博客被盗，完完全全复制粘贴，不仅标注了原创，没有标注原文链接，搞得像是他自己写出来的一样，我发私信让他加上原文链接，他好像是个瞎子外加聋哑人????????????好家伙，我 TM 直接好家伙大学期间的昵称叫 Heygo（黑狗），女票给取的，前段时间家里出了点事情，在网上查一下，黑狗是抑郁症代表词语，丘吉尔有一句名言：“心

uniapp 前端阿里云oss 图片上传

02-16

### UniApp 使用阿里云 OSS 实现图片上传的方法 #### 准备工作为了使UniApp能够顺利地将图片上传到阿里云OSS，在项目初始化阶段需完成如下配置： - 注册并登录阿里云账号，创建对应的Bucket资源，并记录下Endpoint、AccessKeyId以及AccessKeySecret等必要参数。 - 安装`aliyun-oss-js-sdk`库以便于操作OSS服务。安装命令如下所示： ```bash npm install aliyun-oss-js-sdk --save ``` #### 获取临时Token 考虑到安全性因素，通常不会直接把Access Key暴露给客户端应用。因此推荐通过服务器端接口向阿里云申请一个短期有效的STS Token用于前端请求认证[^2]。 #### 图片上传流程设计当用户选择好要上传的照片之后，应用程序会先对该照片添加水印处理再执行上传动作；整个过程可以在不依赖任何后台支持的情况下由前端独立完成。具体步骤包括但不限于读取本地文件流、绘制带有指定样式的Canvas图形作为最终待保存的数据对象等等[^1]。 #### 示例代码展示下面是一份完整的示例代码片段，展示了如何利用上述提到的技术要点构建起一套简易却实用的图片上传机制： ```javascript import OSS from 'ali-oss'; // 初始化Client实例 const client = new OSS({ region: '<YourRegion>', // 如 oss-cn-hangzhou accessKeyId: '<YourAccessKeyId>', accessKeySecret: '<YourAccessKeySecret>', stsToken: '<YourStsToken>', // 如果使用了 STS，则需要提供该字段 bucket: '<YourBucketName>' }); async function uploadImageWithWatermark(filePath) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 加载原始图像 const img = new Image(); img.src = filePath; await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; }); // 设置画布大小等于原图尺寸 canvas.width = img.width; canvas.height = img.height; // 绘制带水印效果的新图像 ctx.drawImage(img, 0, 0); drawWaterMark(ctx); // 自定义函数负责实际渲染逻辑 // 将 Canvas 转换成 Blob 对象准备上传 const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg') ); try { const result = await client.put('<ObjectName>.jpg', blob); console.log(`Upload succeeded! URL=${result.url}`); return result.url; } catch (error) { console.error('Failed to upload image:', error.message); } } function drawWaterMark(context){ context.font="30px Arial"; context.fillStyle="#FFFFFF"; context.globalAlpha=0.5; context.fillText("Sample Water Mark",context.canvas.width*0.7,context.canvas.height*0.9); } ``` 这段脚本首先引入了必要的SDK包，接着定义了一个异步方法用来接收来自用户的媒体文件路径作为输入参数。内部实现了基于HTML5 Canvas API的操作来合成一张新的含有所谓“水印”的JPEG格式图片，并将其转换成适合网络传输的形式提交给远端服务器进行持久化存储。最后还附上了简单的文字样式定制辅助工具供开发者进一步调整细节之处[^3]。