Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Send canvas as image upload, not base64 text

6:02 pm on Nov 11, 2012 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
votes: 1

I have an html form that allows users to to upload images to my website. To save bandwidth, time and other resources I'm starting to use a script that implements canvas resizing, if supported, before uploading the image. The base of the script you can find by searching for "Resizing images before upload using HTML5 canvas".

I'm running into a problem and wondering if there are no ways around it. If js is disabled or canvas is not supported in the browser than the images are uploaded. Else, if this script runs than instead of images, base64 text of the image is returned. This complicates the backend script that receives the images (or now base64 text). Is there a way of sending the resized images themselves and not the text?
3:15 am on Nov 16, 2012 (gmt 0)

New User

5+ Year Member

joined:Nov 16, 2012
posts: 1
votes: 0

Thank you.
6:40 am on Nov 16, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
votes: 30

There are base64 decode JavaScript examples out there. The PHP.js project has a nice piece of code, for example. I would be a little concerned about potential memory issues when you have a canvas image and a binary copy being processed simultaneously by JavaScript, so it might actually be best to let your server-based script handle the decoding.