My next Json question...

0 favourites
  • 11 posts
  • 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:


    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:

    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)

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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.)

  • The png version is like 4kb, and the Json is 180kb.

    Since I need a collision polygon anyway I'll just stick to that.

    At least a passable one file sprite import is doable now.

    Then again who knows what Ashley has planned for Svg.

    The ability to draw, and save using svg features like we can with Drawing Canvas absolutely fantastic.

  • 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.)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)