My next Json question...

Ok, now I want to add a Drawing Canvas image to my Json object to download with all my other data as one file.

I think it should be done using the Binary object, but it's like figuring out a black box.

And all I'm getting from examples is a blob url:

blob:https://preview.construct.net/7643aa83-b9f2-4d2e-a3c6-9fe9e02e0844

Which doesn't seem like it would be the right thing, but I have no idea how to even test if that data is what I need.

Are you trying to save an image (binary) in JSON? Usually, you will need to convert it to base64 (string representation of binary) to save to JSON. So I would look around for that.

If you have an image to convert, you can use this:

base64-image.de

However, then you need to figure out how to load the base64 output into something else to display in C3, which you can easily do!

For example, you can load it into a sprite through a URL:

-> Sprite: Load image from "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAB+FBMVEUAAAA/mUPidDHiLi5Cn0XkNTPmeUrkdUg/m0Q0pEfcpSbwaVdKskg+lUP4zA/iLi3msSHkOjVAmETdJSjtYFE/lkPnRj3sWUs8kkLeqCVIq0fxvhXqUkbVmSjwa1n1yBLepyX1xxP0xRXqUkboST9KukpHpUbuvRrzrhF/ljbwaljuZFM4jELaoSdLtElJrUj1xxP6zwzfqSU4i0HYnydMtUlIqUfywxb60AxZqEXaoifgMCXptR9MtklHpEY2iUHWnSjvvRr70QujkC+pUC/90glMuEnlOjVMt0j70QriLS1LtEnnRj3qUUXfIidOjsxAhcZFo0bjNDH0xxNLr0dIrUdmntVTkMoyfL8jcLBRuErhJyrgKyb4zA/5zg3tYFBBmUTmQTnhMinruBzvvhnxwxZ/st+Ktt5zp9hqota2vtK6y9FemNBblc9HiMiTtMbFtsM6gcPV2r6dwroseLrMrbQrdLGdyKoobKbo3Zh+ynrgVllZulTsXE3rV0pIqUf42UVUo0JyjEHoS0HmsiHRGR/lmRz/1hjqnxjvpRWfwtOhusaz0LRGf7FEfbDVmqHXlJeW0pbXq5bec3fX0nTnzmuJuWvhoFFhm0FtrziBsjaAaDCYWC+uSi6jQS3FsSfLJiTirCOkuCG1KiG+wSC+GBvgyhTszQ64Z77KAAAARXRSTlMAIQRDLyUgCwsE6ebm5ubg2dLR0byXl4FDQzU1NDEuLSUgC+vr6urq6ubb29vb2tra2tG8vLu7u7uXl5eXgYGBgYGBLiUALabIAAABsElEQVQoz12S9VPjQBxHt8VaOA6HE+AOzv1wd7pJk5I2adpCC7RUcHd3d3fXf5PvLkxheD++z+yb7GSRlwD/+Hj/APQCZWxM5M+goF+RMbHK594v+tPoiN1uHxkt+xzt9+R9wnRTZZQpXQ0T5uP1IQxToyOAZiQu5HEpjeA4SWIoksRxNiGC1tRZJ4LNxgHgnU5nJZBDvuDdl8lzQRBsQ+s9PZt7s7Pz8wsL39/DkIfZ4xlB2Gqsq62ta9oxVlVrNZpihFRpGO9fzQw1ms0NDWZz07iGkJmIFH8xxkc3a/WWlubmFkv9AB2SEpDvKxbjidN2faseaNV3zoHXvv7wMODJdkOHAegweAfFPx4G67KluxzottCU9n8CUqXzcIQdXOytAHqXxomvykhEKN9EFutG22p//0rbNvHVxiJywa8yS2KDfV1dfbu31H8jF1RHiTKtWYeHxUvq3bn0pyjCRaiRU6aDO+gb3aEfEeVNsDgm8zzLy9egPa7Qt8TSJdwhjplk06HH43ZNJ3s91KKCHQ5x4sw1fRGYDZ0n1L4FKb9/BP5JLYxToheoFCVxz57PPS8UhhEpLBVeAAAAAElFTkSuQmCC" (Resize to image size, cross-origin anonymous)

Did a little experiment...

Paste some sprites into a Drawing Canvas, save Drawing canvas, get blobURL, then run a little JS to convert the blob URL to base64, put that in a string and load a Sprite, seems to work (the one caveat is that the Drawing Canvas transparent regions get changed to black...

So if you want to save a DC as a string which can be used in JSON then load that image back into a sprite, this is one way...

Thanks!

Yeah I was just messing around and it looks like you can save the binary to base64 using "set buffer to base64" which you can get after you load the binary and using the BinaryData.GetBase64 expression.

I was hoping to use the binary, and that it would be a lot smaller than base64

You can't put binary in text formats. JSON is a text format, so you have no choice but to use base64.

You don't need to use JS code for that: you can load the blob URL in to a Binary Data object with AJAX, and then get base64 from Binary Data.

Ashley would a binary file be doable?

Thanks for the alternate method Ashley, here's what I had to do to get that to work for my example (add the data and image info, etc. before base64 string to load the sprite by URL.)

-> SpriteDisplay: Load image from "data:image/jpeg;base64,"&BinaryData.GetBase64 (Keep current size, cross-origin anonymous)

Newt, base64 is larger, but not too bad (33% bigger at most.)

Wow, something strange is going on. If the PNG version is 4KB, the base64 version of the PNG binary (string version) should be around 6KB.

The downloaded png is now 115kb I guess that's because it has more image data than my first test.

That's more on par with what you were saying.

Ah, yes that's more on par (though the max worst case for 115KB binary is around 153KB for a base64 version, no higher than that.)