Javascript 如何通过操作base64代码来调整base64图像的大小或更改其分辨率?

Javascript 如何通过操作base64代码来调整base64图像的大小或更改其分辨率?,javascript,base64,image-manipulation,Javascript,Base64,Image Manipulation,有很多将图像编码到Base64的示例。有没有办法通过简单地操纵实际的base64编码内容来更改图像的大小或分辨率 您的base64代码可能是: iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U/gAAAgAE... 是否有一种算法或方程式允许您操纵Base64字符串来更改图像的大小或分辨率 我的问题是针对那些关注渐进式图像、数据处理和WebP格式的人,这是一种无损和有损的图像压缩 我对创建画布元素和操纵画布内容不感兴

有很多将图像编码到Base64的示例。有没有办法通过简单地操纵实际的base64编码内容来更改图像的大小或分辨率

您的base64代码可能是:

iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U/gAAAgAE...
是否有一种算法或方程式允许您操纵Base64字符串来更改图像的大小或分辨率


我的问题是针对那些关注渐进式图像、数据处理和WebP格式的人,这是一种无损和有损的图像压缩


我对创建画布元素和操纵画布内容不感兴趣。我感兴趣的是一种可以在客户端或服务器上使用,并且可以通过HTTP或套接字通信发送的方法。

可以使用
元素

var canvas=document.createElement(“canvas”);
var ctx=canvas.getContext(“2d”);
canvas.width=32;//目标宽度
canvas.height=32;//目标高度
var image=新图像();
document.getElementById(“原始”).appendChild(图像);
image.onload=函数(e){
ctx.drawImage(图像,
0,0,image.width,image.height,
0,0,canvas.width,canvas.height
);
//创建新的base64编码
var resampledImage=新图像();
resampledImage.src=canvas.toDataURL();
document.getElementById(“重采样”).appendChild(重采样图像);
};
image.src=“数据:图像/png;base64,Ivborw0kgoaaaansuhueugaadaaawcamaaabg3am1aaabafbmvevmounournokrookvpokzqo0drpehspeltpupvk1wpk1xp09zqfbbzqffjbqfjbqfqqqqqq1zg1hgrfhirfpirvtlrlll5mr15n2bpsgfqswnssrus2dws2hwtglxtlytglytglytztztwx4uxj6uxjuxjr+u3d/vhiavhqhqvhqbqbvqbqqqvqqqqqqqqqqqqqqqqqqqqqqqyqyqvqvqvqvqvqyqvzzzzjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj7月7日,7月7日,7月7日,7月7日,7月7日,7月7日,G79/h79/I8/OH7 7 7 7月7日,7月7日,7 7月7日,7月8日,7月8日,7月8日,7月8日,7月8日,7月8日,7月8日,7月8号,7号,8月8号,7号,8号,7号,8号,8号,8号,8号,8号,8号,7号,8号,8号,8号,8号,8号,8号,8号,OOOOOOOH8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,8号,OOOOOOOOOH7 GwG+0drbcLKVRVF/DacVQSbnkL/oCJY+AXV4OrgPavolmJvJxU0GWGQBBSDD4EKHR7CinjclyGellJ212.B/Btr/XndZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZRU5ERKJGG==“;
原件(48x48)

重新采样(32x32)


这是非常古老的,但您可以使用它作为背景,使用url和背景大小:contain进行操作;这样图像应该显示在高度内,并与您一起建立,而不是被容器剪裁。

否,以及您为什么要这样做?编写图像解析器(例如gif-in-b64)将比简单地执行
img=base64_编码(mangle_图像(base64_解码(orig_图像))需要更多的工作
b64正在用包装纸包裹礼物。你不会为了把不需要的芭比娃娃换成一辆热轮车而乱动包装纸。因为我不想有多个不同大小和分辨率的图像。我也不想有从磁盘加载图像并对其进行操作的网络访问延迟打电话给原稿,然后根据我的要求进行处理。顺便说一句,你的类比没有真正的帮助,说它是用包装纸包裹礼物也是完全不准确的。我还假设你的图片示例来自你自己的收藏,所以告诉我更多关于你的信息,而不是答案。简单的“不”可能更准确感谢您。我相信对图像进行任何调整大小操作都需要该图像的内存表示。因此,base-64数据无法工作,但即使是编码的GIF或JPEG也必须转换为原始图像格式,进行操作,重新转换为GIF/JPEG,然后重新进行base-64编码。使用Base64字符串的变量将被视为“内存中”表示法。如果图像是“像素阵列”,则可以更改图像的颜色,因此我想知道是否有Base64方法。除非您使用像素阵列进行更改,然后将其转换为Base64?@Pandafinity这可能会帮到您,感谢您的回复。我很感激您可以使用Canva进行更改s或其他UI元素,但我只想尝试在代码中进行转换/操作,而不创建任何HTML(5)元素。不要认为这是可能的。你能提高分辨率吗?是的,但显然你会得到某种立方降采样