Save card as image

[TheLastProject]

To make it even nicer for non-Catima users to deal with received cards.

[Cj-Malone]

https://github.com/tsayen/dom-to-image may be a solution, but it looks abandoned.

[ngdangtu-vn]

Could you elaborate your problem? Maybe we image concept or a link to where should I deal with?

Right now, I don't understand at these point:

• What & Where is the received cards?
• What does "deal" mean? Is it meant to be able download the HTML element(s) call "cards"?
• non-Catima users meant pass-by visitors on the website or guest who use trial in your app?

[TheLastProject]

When you use the Share feature inside Catima, you generate a link like https://catima.app/share/#store%3DExample%26note%3D%26balance%3D0%26cardid%3D1234%26barcodetype%3DQR_CODE%26headercolor%3D-1784274.

If you have Catima installed, Catima can import this card. If not, you can open the URL in your browser and see an image of the card.

Being able to download the displayed card as an image might be helpful for people who don't want to install Catima or who aren't on Android.

[ngdangtu-vn]

Thanks for clarifying. Two last questions, a whole card need to be exported or just a QR code is important? How did you generate QR code.

Be honest, this may not an easy task that can be done in a few hours. So if I can accept the task, please be patient.

[TheLastProject]

I think saving the whole thing is probably more useful because at a store you may want to also have the other info like the amount of points.

The current generation is done with bwip-js, and there is some Javascript code inside the Markdown that's turned into HTML: https://github.com/CatimaLoyalty/Website/blob/main/_pages/share.md?plain=1#L36-L155

Given not many users will likely use a feature like this, keeping it simple sounds fine. Perhaps the simplest solution is to use CSS3 media queries to set display: none to most elements when you want to print it and add an extra button to just call window.print(). Sure, it'll be slightly different, but given most systems can print to a file (and thus PDF) it should be pretty similar in usefulness to the very small amount of people who will want an easy way to show the card without internet access without installing Catima (and most people are used to PDF files). But up to what you think :)

[ngdangtu-vn]

I did this feature one in a project of my old company. My way was put them in a canvas and download image (JPG/PNG) of that canvas. It has a bit downside and edge case (on safari, at least that what I was reported to). But consider the size of card is small, maybe we can go with that case.