Is the string returned by canvas.toDataURL(“image/png”) really a encoded 64 based string?

238 views
Skip to first unread message

Stallman

unread,
Oct 13, 2012, 9:08:00 AM10/13/12
to phonegap
Development Environment:
Android: 4.1.1
PhoneGap: 1.7.0
HardWare: Transformer TF300.
Language: Javascript/Jquery

I am not pretty sure the method canvas.toDataURL() returns an encoded
64 base string.I create an png image by mspaint.exe (pic ). The
painting is the same with the one I created on the canvas. I draw
nothing on both of them to ensure they are almost the same.

Then I uploaded the created png file to this site (encoder) to get the
encoded base 64 string,using the pluging provided here(convert base64
string to binary code) to convert it back to the png file. It does
succeed.

But as I check the other string returned by canvas.toDataURL(), I find
the encoded base64 string is quite different from the former one, and
after the convertion, the png file is corrupt. Here are the two 64-
encoded strings:

The base 64 string which I created by mspaint:

iVBORw0KGgoAAAANSUhEUgAAAoAAAAGACAIAAACyR0TpAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAENNJREFU
eF7t2MEJxDAQBEE7/6B15yTUjyknMFAsNPJ7znl8BAgQIECAwGWBf4B9BAgQIECAwGWB5/
KeOQIE CBAgQOD7/UyBAAECBAgQuC8gwPfNLRIgQIAAAS9gN0CAAAECBAoBL
+BC3SYBAgQIzAsI8PwJACBA
gACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAAB
AvMCAjx/AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIE
CgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwL
CPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQE
uFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDz
JwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/
AgAIECBAoBAQ4ELd JgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAA
AgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1mwQI
ECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8fwIACBAg
QKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDA
vIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFC
QIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wIC
PH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycAgAABAgQKAQEu
1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJ
ACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJ
gAABAvMCAjx/AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAA
AQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIE
CMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQ
KAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAv
IMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/
AgAIECBAoBAQ 4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADP
nwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1
mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8fwIA
CBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIg
QIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECA
AIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC
8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycAgAABAgQK
AQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI
8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4
ULdJgAABAvMCAjx/AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMn
AIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0m
AQIECMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAAC
BAgQKAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQ
IDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/
AgAIECBA oBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8
gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgUJA
gAt1mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8
fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7U
bRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/
AgAIECBAoBAQ4ELdJgECBAjMCwjw/AkA
IECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mA
AAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycAgAAB
AgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYBAgQI
zAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAo
BAS4ULdJgAABAvMCAjx/AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8g
wPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDg
Qt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+f
AAACBAgQKAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3Wb
BAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/
AgAI ECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBA
gMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAA
gUJAgAt1mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLz
AgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoB
AS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/
AgAIECBAoBAQ4ELdJgECBAjMCwjw /
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQ
t0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycA
gAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYB
AgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIE
CBAoBAS4ULdJgAABAvMCAjx/AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAg
MC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECg
EBDgQt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyA
AM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCA
C3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/
AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRt
EiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAg
QIAAgUJAgAt1mwQIECAwLyDA8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAA
AQLzAgI8fwIACBAgQKAQEOBC3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAEC
BAoBAS7UbRIgQIDAvIAAz58AAAIECBAoBAS4ULdJgAABAvMCAjx/
AgAIECBAoBAQ4ELdJgECBAjM Cwjw/
AkAIECAAIFCQIALdZsECBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgE
BLhQt0mAAAEC8wICPH8CAAgQIECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgUJAgAt1mwQIECAwLyDA
8ycAgAABAgQKAQEu1G0SIECAwLyAAM
+fAAACBAgQKAQEuFC3SYAAAQLzAgI8fwIACBAgQKAQEOBC
3SYBAgQIzAsI8PwJACBAgACBQkCAC3WbBAgQIDAvIMDzJwCAAAECBAoBAS7UbRIgQIDAvIAAz58A
AAIECBAoBAS4ULdJgAABAvMCAjx/AgAIECBAoBAQ4ELdJgECBAjMCwjw/
AkAIECAAIFCQIALdZsE
CBAgMC8gwPMnAIAAAQIECgEBLtRtEiBAgMC8gADPnwAAAgQIECgEBLhQt0mAAAEC8wICPH8CAAgQ
IECgEBDgQt0mAQIECMwLCPD8CQAgQIAAgULgB12c8iLK4gMnAAAAAElFTkSuQmCC

The other one I got from the canvas.toDataURL():

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA
+gAAAKACAYAAAAPc1JnAAAABHNCSVQICAgIfAhkiAAACcdJREFUeJztwQEBAAAAgiD/
r25IQAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHwaFMkAAcr6HdsAAAAASUVORK5CYII=


My question is that is the string returned by canvas.toDataURL("image/
png") really a encoded base-64 string?
Why they look so different... I'm so confused.
Sorry for the long long bothering string.

Simon MacDonald

unread,
Oct 15, 2012, 11:37:41 AM10/15/12
to phon...@googlegroups.com
Canvas.toDataUrl() was stubbed out for a long time on Android. I'm not
100% if it is finally fixed in 4.1. Looking at your output it still
seems to be broken.

You may want to try:

https://code.google.com/p/todataurl-png-js/

Simon Mac Donald
http://hi.im/simonmacdonald
> --
> -- You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com
>
> To compile in the cloud, check out build.phonegap.com
>
>
Reply all
Reply to author
Forward
0 new messages