Layer two png blobs on top of each other in motoko

Developers
1

Is there a way to layer two png images on top of each other within Motoko with both images being in blob formats (basically having a foreground/background)? I know blobs are format agnostic, but I was just wondering if you could combine the two blobs properly in this fashion.

2

The easiest way is to layer them with an SVG. You can not just combine two PNG blobs (afaik), since there are no (finished) PNG packages yet.

1 Like
3

I see for the image layering example, it looks like it’s just a motoko script of some sort (no actor or anything like that)?
Would code like:
canvas.image(10, 10, 200, 200, "https://raw.githubusercontent.com/aviate-labs/svg.mo/main/examples/image.svg", []);
work in a canister? If not, how would I layer images if I have the blobs stored in the canister itself?

4

If the images are not too big, you can also just use base64 encoded blobs:

canvas.image(90, 90, 5, 5, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==", []);

How it is done with NFTs right now, it that every asset is hosted in an assert canister on the IC, in turn these urls are used in the SVG that is returned by http_request in an actor.

1 Like
5

Okay I see. I know the departure labs standard seems to take a payload blob and then returns a header telling a request that it is encoded as a particular data type (I think?). And ext standard just takes a blob for metadata (which I thought would be some sort of png). Correct me if I’m wrong.

Would be interesting to layer SVGs though and return the result in an HTTP handler.

6

@quint
Also, do you know how to encode a Blob into the base64 string in that example? I see you can decode a blob into utf8 with Text.decodeutf8. Does that work?

7

No that is a totally different thing. There is (currently) no base64 package for Motoko.
So, you would have to base64 encode it off-chain, and upload it to a canister.

1 Like
8

I added base64 encoding to the encoding package. I have not yet implemented the decoding part, feel free to open a PR if you decide to implement it.

3 Likes