如何写入无用数据将Base64编码图片体积变大?

大蝙蝠
  • 30
北京市

我有一段可以正常显示的base64编码图片
const base64Str = data:image/png;base64,xxxxxxxxxxxxx;

我希望在base64Str中加入大量无用数据 使得

  1. 图片能够正常显示
  2. 图片宽高不发生改变
  3. 图片体积变大

请问应该写入什么数据才能,实现上述功能

回复
阅读 935
5 个回答
✓ 已被采纳

感谢各位回答,我从大家里面找到了一种实现思路
可以在base64编码字符串后面拼接大量base64编码后空格

下面是实现逻辑

    const extraDataSize = 1024 * 1024; //额外数据大小
    let rawBase64Str = `data:image/png;base64,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`
    window.onload = () => {
        const img = new Image();
        let decodedBase64Str = atob(rawBase64Str.split(",")[1]); //将base64进行解码
        decodedBase64Str = `${decodedBase64Str}${"x".repeat(extraDataSize)}` //塞入无效数据
        const base64Str = btoa(decodedBase64Str) //将数据转化为base64b编码
        img.src = "data:image/png;base64," + base64Str;
        document.body.append(img)
    }

让图片大小增大,这个需求是这样的,我们开发了一个mock服务器功能,会在客户端生成一张图片,用户可以自定义这个图片属性(宽高,背景色等)。对于前端开发而言,有时候需要测试大图片加载效果(比如做一些onload之类的加载效果),所以做了这个功能方便mock测试

真是奇葩的需求

base64的图片它也是图片文件呀,你只需要将这个文件末尾添加一堆无用的字节,图片解码的时候是根据规定的图片格式来的,自然会丢掉后面无用的数据。

用 js 操作的话需要先将base64字符串转为字节数组,然后就可以随意追加内容了 https://developer.mozilla.org...

<body>
</body>
<script>
  function b64ToUint6(nChr) {
    return nChr > 64 && nChr < 91 ?
      nChr - 65
      : nChr > 96 && nChr < 123 ?
        nChr - 71
        : nChr > 47 && nChr < 58 ?
          nChr + 4
          : nChr === 43 ?
            62
            : nChr === 47 ?
              63
              :
              0;
  }

  function base64DecToArr(sBase64, nBlocksSize) {
    var
      sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
      nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
    for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
      nMod4 = nInIdx & 3;
      nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 6 * (3 - nMod4);
      if (nMod4 === 3 || nInLen - nInIdx === 1) {
        for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
          taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
        }
        nUint24 = 0;

      }
    }
    return taBytes;
  }

  function makeFat(image, extraByteSize = 10240) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext("2d");
    [canvas.width, canvas.height] = [image.width, image.height]
    ctx.drawImage(image, 0, 0);
    let b64Str = canvas.toDataURL("image/png");
    b64Str = b64Str.substring(b64Str.indexOf(";base64,") + 8);
    const buffer = base64DecToArr(b64Str);
    const newBuffer = new Uint8Array(buffer.length + extraByteSize);
    newBuffer.set(buffer);
    return newBuffer;
  }

  function download(imageBuffer) {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([imageBuffer], { type: "image/png" }));
    a.download = "image.png";
    document.body.appendChild(a);
    a.innerHTML = "Download"
  }

  const input = document.createElement("input");
  input.type = "file";
  input.accept = ".jpg";
  document.body.appendChild(input);
  input.onchange = async (e) => {
    if (e.target.files.length === 0) return;
    const image = new Image();
    image.src = URL.createObjectURL(e.target.files[0]);
    await new Promise(resolve => image.onload = resolve);
    document.body.appendChild(image);

    const buffer = makeFat(image);
    download(buffer);
  }
</script>

知道个别的办法,用windows窗口命令可以合并文件
copy /b 文件名1+文件名2+......文件名N 合并后的文件名
https://blog.csdn.net/GaoShi6...

利用canvas写入图片然后反向压缩后再生成base64

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏