4

I have an application where users need to transmit data to each other (can't go through the server). I thought it might be nice to render an image from that data, and have them send that image (QR codes won't work for various reasons).

I came accross this github repo which looked promising, and implemented it, here.

The problem is, for various reasons, the output will be different for different browsers (and possibly OS's). Try it for yourself. Encode various messages in different browsers, and you'll see different base64 encoded results.

Is there any good solution to this? Can I implement a third party canvas library? Maybe use FileReader.readAsDataURL()?

Community
  • 1
  • 1
Adam
  • 3,142
  • 4
  • 29
  • 48
  • 2
    [Related](http://stackoverflow.com/questions/36273990/canvas2d-todataurl-different-output-on-different-browser/36274211#36274211) but since you're asking for the use of canvas particularly, then no, there is no solution. Even a FileReader will use the decode/reencoded data from the canvas, which is, as well said in the answer you point to, browser and even machine dependent. So if you've got to go through the canvas API, you'll be stuck with different outputs. – Kaiido Aug 05 '16 at 05:05
  • 1
    Thinking a bit more about it, a possible solution would be to do the encoding yourself, directly from js, without the use of canvas. – Kaiido Aug 05 '16 at 05:16
  • 1
    Yeah, i thought maybe encoding it myself would be good, but was hoping to find a library i could use – Adam Aug 05 '16 at 05:54
  • 1
    [Processing.js](https://github.com/processing-js/processing-js/) looks promising... – Adam Aug 05 '16 at 16:36
  • 1
    So does [PNGlib.js](http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/) – Adam Aug 05 '16 at 16:44
  • good question! i think you still will get problems. why? the content could be rendered slightly different depending on browser such as antialiasing and alpha. would possibly affect the encoding. but i'm just guessing. – bjanes Aug 06 '16 at 11:41
  • @bjanes great observation, but the decoding doesn't depend on the browser's rendering of the png, it reads the actual base64 encoded png data – Adam Aug 06 '16 at 19:05

1 Answers1

1

Alright, in the end, I did have to use a 3rd party image processing library, and couldn't depend on the browser's canvas feature. Here's my solution :)

I built it on top of this image processing library.

Adam
  • 3,142
  • 4
  • 29
  • 48