Base64 映像不会使用任何常用方法进行缩减

Question

>我正在使用KendoUI的图表功能，并希望导出生成的结构以显示为缩略图。

我正在导出 Base64 格式的图像。然后保存。

然后将此数据加载到div 中，并且需要缩放以适合div。但是，我已经尝试了所有常见的技术来缩小图像，但它根本不会。

目前我有这样的东西。它是一段html，被用作基诺列表的模板。这里可能有一些东西导致了这个问题，但如果有的话，我找不到它。

<div id="thumbnailContainer" style="height: 100%; width: 100%;">
<img id="thumbnail" src="#:imageData#" style="(every technique under the 
sun tried)"
</div>

其中"#：imageData#对应于某些Base64图像数据(否则可以正确显示和加载(

尝试的技术：

• 背景大小
• 改为设置容器的背景
• 调整图像的高度和宽度

js小提琴

Answer 1

你没有提到它是一个SVG，而不仅仅是一些图像。SVG 在大小调整方面是"特殊的"。不要为 SVG 使用 base64 可能是个好主意，因为它不会节省空间或为您带来任何好处。诀窍是将viewBox="0 0 W H"添加到<svg>标签中。在您的情况下viewBox='0 0 2400 1200'似乎效果很好。如果您坚持使用 base64，则需要在转换之前添加它。

演示

Answer 2

尝试在代码中执行此操作

<img id="thumbnail" src="'data:image/png;base64,' + your_base64_string" style="width:50px;height:250px">

这应该有效。如果它不起作用，那么您的其他 css 可能有问题。