fr_Hints & Tips

Trucs & Astuces

Cette page liste des trucs, des astuces et des bouts de code concernant des choses courantes, fréquentes et/ou difficiles à obtenir via Geckos. Considérez cette page comme une boîte à outils !

A propos de la création du Canvas

Cette section a pour but de vous aider à concevoir l'image générée pour vos cartes.

Image de l'utilisateur dans un cadre non-rectangulaire

Sometimes, an image loaded in a card needs to appear in a frame that is not-rectangular. We could create a shape to clip it, but that will be tedious. If a generic image background is used to decorate the card, there's an easier method.


If I have an Image background, I set the canvasFields section like this :

"canvasFields": [
  { "type": "image", "width": 880, "height":1201, "src": "data:image/png;base64,iVBORw0..." }
],

Note that the DataUrl has been voluntarily truncated.

Let's say I've added a field allowing the user to load an image, with the field's name being picture. I can add the picture to the canvas, but it will appear in a rectangle, and be over my top left area.

How to correct that ? Well, first, edit your image. Get it in PNG format, and set the area where the image should appear to a transparent color. Save your image, translate it to DataUrl (or static url), and copy it to your template. If you test your template without loading any image, you should see your background color.

Good, now, edit your canvasField section by putting your image linked to picture before your background image. By getting your custom image underneath, the background image will not be written over !