L'image Base64 ne sera pas réduite en utilisant les méthodes habituelles

Question

J'utilise la fonction de diagramme de KendoUI, et je souhaite exporter la construction résultante pour l'afficher sous forme de vignette.

J'exporte l'image, qui est au format Base64. Celle-ci est ensuite sauvegardée.

Ces données sont ensuite chargées dans une div et doivent être mises à l'échelle pour s'adapter à la div. Cependant, j'ai essayé toutes les techniques courantes pour réduire la taille de l'image, mais je n'y parviens pas.

Actuellement, j'ai quelque chose comme ça. Il s'agit d'un morceau de html qui est utilisé comme modèle pour une liste de keno. Il y a peut-être quelque chose ici qui cause le problème, mais je n'ai pas réussi à le trouver si c'est le cas.

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

où "#:imageData# correspond à des données d'image en base64 (qui s'affichent et se chargent correctement par ailleurs)

Techniques essayées :

• Taille de l'arrière-plan
• Définition de l'arrière-plan du conteneur à la place
• Ajustement de la hauteur et de la largeur de l'image

jsFiddle

Answer 1

Vous n'avez pas précisé qu'il s'agit d'un SVG, et non d'une simple image. Le SVG est "spécial" en ce qui concerne la taille. C'est probablement une bonne idée de ne pas utiliser la base64 pour les SVG, car cela ne permet pas de gagner de l'espace ni de faire quoi que ce soit. L'astuce consiste à ajouter viewBox="0 0 W H" à la <svg> tag. Dans votre cas viewBox='0 0 2400 1200' semble bien fonctionner. Si vous insistez pour utiliser base64, vous devez l'ajouter avant de le convertir.

Démonstration

Answer 2

Essayez de faire ceci dans votre code

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

cela devrait fonctionner. Si ce n'est pas le cas, il se peut que vous ayez un problème avec vos autres css.