极客观点
项目管理
HarmonyOS
我有一段可以正常显示的base64编码图片
const base64Str = data:image/png;base64,xxxxxxxxxxxxx;
我希望在base64Str中加入大量无用数据 使得
- 图片能够正常显示
- 图片宽高不发生改变
- 图片体积变大
请问应该写入什么数据才能，实现上述功能
如何写入无用数据将 Base64 编码图片体积变大?
阅读 3.8k
真是奇葩的需求
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...
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}10 回答11.2k 阅读
vue项目如何在初始化之前跳转外部页面？
vue项目内有一个分享功能，但是这个分享出去的页面打开会非常慢，所以就想到了单独写了一套H5页面专门用于手机端打开，然后在这个vue项目的分享页面初始化函数里面加一个判断终端是否为移动端，如果是就再做一次跳转，到这个单独的H5页面上去，这样就不会去加载vue框架，打开速度会更快。以上是初始方案和预期。5 回答4.9k 阅读✓ 已解决
js如何控制移动端overflow:scroll容器滑动的最大速度？
{代码...} demo在这：[链接]在移动端滑动一下这个.box区域,稍微一用力就到头了，如果我想用js去控制他滑动的最大速度该怎么去处理？4 回答3.1k 阅读✓ 已解决
前端代码更新如何通知用户刷新页面？
前端代码更新如何通知用户刷新页面？2 回答2.8k 阅读✓ 已解决
纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？
纯css绘制倒过来的等腰梯形的样式。而且可以把梯形的背景色调整为无色。可以接受复杂代码（比如布局复杂，单个div单个css样式是无法完成，需要多个div搭配多个样式），但是至少满足以下要求（1）可以调整边框的颜色大小粗细等，（2）可以调整边框内外阴影（3）梯形里面还能放文字3 回答4.9k 阅读✓ 已解决
字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？
尝试一下字节的 trae AI IDE ([链接])安装后导入 vscode 的配置，好像一起把 vscode 的插件也导入了也能看到 vscode 之前配置的 ssh remote 但是连不上看到「输出」如下⬇️ {代码...}1 回答3.2k 阅读✓ 已解决
为什么会出现CORS error？
先登录成功了。再次调用，就出现了CORS error在Login页调用这个接口就是正常的，换一个页面调用这个接口就出现了跨域问题。我把这段代码注释以后就正常了。3 回答2.3k 阅读✓ 已解决
感谢各位回答，我从大家里面找到了一种实现思路
可以在base64编码字符串后面拼接大量base64编码后空格
下面是实现逻辑
让图片大小增大，这个需求是这样的，我们开发了一个mock服务器功能，会在客户端生成一张图片，用户可以自定义这个图片属性(宽高，背景色等)。对于前端开发而言，有时候需要测试大图片加载效果(比如做一些onload之类的加载效果)，所以做了这个功能方便mock测试