Base64 Image 不会使用任何常用方法缩小 [英] Base64 Image will not scale down using any common methods
问题描述
我正在使用 KendoUI 的图表功能，并且想要导出生成的构造以显示为缩略图.
我正在导出 Base64 格式的图像.然后保存.
然后将这些数据加载到一个 div 中，并需要对其进行缩放以适合该 div.然而，我已经尝试了所有常见的技术来缩小图像，但它根本不会.
目前我有这样的事情.它是一段 html，被用作基诺列表的模板.这里可能有什么东西导致了这个问题，但如果有的话，我没能找到.
<img id="thumbnail" src="#:imageData#" style="(每个技巧下太阳试过了)"其中#:imageData#"对应于 someBase64 图像数据(正确显示和加载)
尝试的技术:
- 背景尺寸
- 改为设置容器的背景
- 调整img的高度和宽度
jsFiddle
您没有提到它是 SVG，而不仅仅是一些图像.SVG 在大小方面是特殊的".不为 SVG 使用 base64 可能是个好主意，因为它不会节省空间或为您带来任何好处.诀窍是将 viewBox="0 0 W H" 添加到 标签.在您的情况下 viewBox='0 0 2400 1200' 似乎运行良好.如果你坚持使用base64，你需要在转换之前添加它.
演示
I am using KendoUI's diagram feature, and want to export the resulting construct to display as a thumbnail.
I am exporting the image, which is in Base64 format. This is then saved.
This data is then loaded into a div, and needs to be scaled to fit the div. However, I have tried absolutely every common technique to scale the image down, but it simply will not.
Currently I have something like this. It is a piece of html which is being used as a template for a keno list. There may be something here which is causing the issue, but I have failed to find it if there is.
<div id="thumbnailContainer" style="height: 100%; width: 100%;">
<img id="thumbnail" src="#:imageData#" style="(every technique under the
sun tried)"
</div>
where the "#:imageData# corresponds to someBase64 image data (which correctly displays and loads otherwise)
Techniques tried:
- Background-size
- Setting background of container instead
- Adjusting height and width of img
jsFiddle
You didn't mention it's an SVG, not just some image. SVG is "special" when it comes to sizing. It's probably a good idea not to base64 for SVG since it doesn't save space or gain you anything. The trick is to add viewBox="0 0 W H" to the <svg> tag. In your case viewBox='0 0 2400 1200' seems to work well. If you insist on base64 you need to add it before you convert it.
Demo
这篇关于Base64 Image 不会使用任何常用方法缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
