uniapp 前端实现阿里云图片实时添加水印效果

最近遇到新的需求，根据用户所访问的公司信息，查询其图片数据，不满足条件时去访问图片数据，图片自动添加公司名称水印，解决思路如下：

图片添加水印，阿里云图片本身就带有图片自动添加水印功能，只需要在访问图片地址时携带对应参数，阿里云图片就会自动添加，详情参考：为图片添加水印时所用到的参数及示例_对象存储 OSS-阿里云
 

//dataimg 后台请求下来的图片地址数据，遍历数组获取每单个地址dataimg.forEach((i)=>{    //携带拼接其对应的参数，控制水印样式i=i+'?x-oss-process=image/watermark,size_96,color_FF0000,text_'+urltxt+',g_se,x_30,y_30'console.log(i) this.nr.imgs.push(i)   })

这里要注意，服务器在接受参数时，水印文字必须要转成base64编码格式才能接收成功，不然会报错，转码方法可以参考：js进行utf-8与base64的编码和解码，并避免出现乱码情况_codeQuality的博客-CSDN博客

完整代码如下：

dataimg.forEach((i)=>{    const txt = new Buffer('文字').toString('base64');    //encodeURIComponent() 函数可以把字符串作为 URI 组件进行编码并且不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码    const urltxt = encodeURIComponent(urltxt);    //携带拼接其对应的参数，控制水印样式i=i+'?x-oss-process=image/watermark,size_96,color_FF0000,text_'+urltxt+',g_se,x_30,y_30'//最终有水印的图片访问地址 console.log(i) this.nr.imgs.push(i)   })

注：此方法只适用于阿里云存放的图片

欢迎大佬指正！