Base64 图像不会使用任何常用方法缩小

Posted 2023-05-07

【中文标题】Base64 图像不会使用任何常用方法缩小

【英文标题】：Base64 Image will not scale down using any common methods

【发布时间】：2018-01-02 21:14:01

【问题描述】：

我正在使用 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# 对应于 someBase64 图像数据（否则正确显示和加载）

尝试过的技术：

背景尺寸 改为设置容器背景 调整img的高宽

jsFiddle

【问题讨论】：

您是否尝试将容器的宽度和高度设置为您想要的图像大小？

请提供一个可重现的示例，以便我们提供帮助。

@HiddenHobbes 看不到我在哪里编辑我的问题，但这是一个现有的 JSFiddle，我已修改以显示问题：jsfiddle.net/kqggd8dh

【参考方案1】：

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

Demo

【讨论】：

太棒了！谢谢，这让我很生气，我没想到 SVG 会有所作为。为了节省我的时间，您知道使用 PDF 代替是否可以进行缩放吗？

哦，不。 PDF 可能甚至不会显示为图像。如果您只想显示缩略图，最好的办法是将该 svg 渲染为图像。看看this。它使用 php 和 ImageMagick

干杯，我不熟悉在 html 中渲染各种图像格式，正如您可能知道的那样。我去看看，谢谢帮助

【参考方案2】：

尝试在您的代码中执行此操作

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

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

【讨论】：

我现在有一个显示问题的 JSFiddle 示例：jsfiddle.net/kqggd8dh 如果您按照您的建议进行操作，它似乎只是裁剪图像而不是缩放它

使用 css transform: scale(0.5, 0.5) 我现在可以做