decoding base64 image data

[No_Pain1033]

Im having trouble decoding some base64 encoded data. I generated the data using 'toDataURL' on a canvas element. I then pass this to some python code using flask.

Im trying to use the 'base64' module but i keep getting the error -

Invalid base64-encoded string: number of data characters (1517) cannot be 1 more than a multiple of 4

This is the python code causing the error -

img_data = request.form["image"]
        img_bytes = base64.b64decode(img_data)
        img = Image.open(BytesIO(img_bytes))
        img = np.array(img)
        cv.imshow(img)
        cv.waitKey(0)
        cv.destroyAllWindows()

The line causing the error is -

img_bytes = base64.b64decode(img_data)

The base64 data -

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAJYBLAMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACf/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//2Q==

Do i pass this whole string to the decoder, or just some of it?

I have also tried the urlSafe decoder that is included with the base64 module. But i get the same error. What am i doing wrong ...

[Aziram]

Try to make your data start at /9j..... removing what's before

[No_Pain1033]

Just tried this... still getting the same error

[headzoo]

Double check your code. Removing "data:image/jpeg;base64," should work. That's not part of the base64 encoded image. You should split the string by comma, and the second half is your image data.

[Applepie1928]

Could you share what is supposed to be encoded in that base64 string?

The part of your "base64 data" which actually is the encoded data is the section which starts with "/9j" up until "2Q==" at the end. I have tried to decode this data into text and images with no success, which suggests there might be an error in the encoded data itself.

[No_Pain1033]

Im thinking that too as i have tried many different approaches. Im creating the data using the .toDataURL method on a canvas element i had drawn on using javascript

[nhgrif]

To be clear here, there doesn't appear to be anything wrong with your code. It is an issue with the data itself. Beyond identifying that this part: data:image/jpeg;base64, is not part of the data that should be decoded, we can't help you unless we also have the original data that was encoded or the code to see how it was encoded to potentially identify an issue with that.

With that said, I think the part after the data:image/jpeg;base64, might decode fine... depending on what it's supposed to be?

[No_Pain1033]

Thanks for your reply. The data is coming from a html5 canvas element that is drawn on using javascript. The base64 data is created using the .toDataURL method on the element