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>

其中＆＃34;＃：imageData＃对应someBase64图像数据（否则会正确显示和加载）

尝试了技术：

背景尺寸
设置容器的背景
调整img的高度和宽度

jsFiddle

Answer 1

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

Demo

Answer 2

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

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

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

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

jsFiddle

2 个答案:

Demo