3

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

Miro
  • 8,402
  • 3
  • 34
  • 72
Stinkidog
  • 425
  • 2
  • 7
  • 19

2 Answers2

2

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

Miro
  • 8,402
  • 3
  • 34
  • 72
  • Awesome! Thank you, it was driving me mad, I didn't expect SVG to make a difference. To save me time, do you know if using PDF instead would allow the scaling to work? – Stinkidog Jul 27 '17 at 09:43
  • Oh no. PDF probably wouldn't even display as image. If you only want to show a thumbnail, your best bet is to render that svg to image. Take at look at [this](https://stackoverflow.com/a/10289762/559079). It uses PHP and ImageMagick – Miro Jul 27 '17 at 09:45
  • Cheers, I'm not familiar with rendering various imaging formats inside html as you can probably tell. I will have a look, thanks for the help – Stinkidog Jul 27 '17 at 09:50
1

try doing this in your code

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

this should work. If its not working then you may have problem with your other css.

Supratik Rulz
  • 235
  • 2
  • 8
  • I now have a JSFiddle example showing the problem: http://jsfiddle.net/kqggd8dh/ If you do as you have suggested, it appears to just crop the image instead of scale it – Stinkidog Jul 27 '17 at 09:23
  • using the css **transform: scale(0.5, 0.5)** I am able to do now – Supratik Rulz Jul 27 '17 at 09:46