技术学习

URL 安全的 Base64 编码/解码

URL 安全的 Base64 编码/解码

腾讯云COS数据万象,文字水印使用的是URL 安全的 Base64 编码

// base64解码
export const URLSafeBase64 = {
 encode: (str) => {
  // 将字符串转换为 UTF-8 编码的字节数组
  let utf8Bytes = new TextEncoder().encode(str);

  // 将字节数组转换为 Base64 编码的字符串
  let base64Str = btoa(String.fromCharCode(...utf8Bytes));

  // 按照 Base64 编码规则,它会被编码为 "SGVsbG8=". 注意末尾的 "=" 补位符。
  // 如果使用 URL 安全的 Base64 编码,它会被编码为 "SGVsbG8",没有补位符。在解码时,需要根据编码时使用的方式来添加或去掉补位符。
  // 替换不安全的字符并去掉补位符
  return base64Str.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 },
 decode: (encodedStr) => {
  // 添加补位符并替换安全的字符
  encodedStr = encodedStr.replace(/-/g, "+").replace(/_/g, "/");
  // 在这里使用 while 循环的原因是为了确保添加的补位符数量正确。
  // 因为在某些情况下,需要添加多个 "=" 补位符,而使用 if 语句只能添加一个 "="。比如,如果编码后的字符串长度为 2,那么需要添加两个 "=" 补位符,才能使字符串长度变为 4。
  while (encodedStr.length % 4) {
   encodedStr += "=";
  }

  // 将 Base64 编码的字符串转换为字节数组
  let base64Bytes = Uint8Array.from(atob(encodedStr), (c) => c.charCodeAt(0));

  // 将字节数组转换为 UTF-8 编码的字符串
  return new TextDecoder().decode(base64Bytes);
 },
}

使用场景

使用腾讯云COS数据万象图片水印功能,自定义给图片加水印

>>> URLSafeBase64.encode("我可以自定义去设置文字水印")
<<< '5oiR5Y-v5Lul6Ieq5a6a5LmJ5Y676K6-572u5paH5a2X5rC05Y2w'

http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?watermark/2/text/5oiR5Y-v5Lul6Ieq5a6a5LmJ5Y676K6-572u5paH5a2X5rC05Y2w/font/dGFob21hLnR0Zg/fontsize/30/fill/IzAwMDAwMA/dissolve/70/shadow/0/gravity/center/dx/0/dy/0

URL 安全的 Base64 编码/解码

GouGe
程志辉 前行的路充满未知,不努力尝试,永远都不知道有多精彩。

发表评论

已有 3 条评论
  1. 服务器产品使用多了有个缺点就是费钱

  2. 好久不见!