Looking to convert canvas to base64 image

Question

I have this code which reads a file (an image) from the local filesystem and I want to resize the image so I can upload it to a server in a smaller format. The problem I am having is that I can't figure out how to resive it and convert it back to base64 so that I can send that base64 string to Cloudinary servers. The file is more than 2 megabytes, as it is, and I believe I can get it down to less than half an MB if I resize the file.

      $scope.addLocalImage = function (file) {

             var reader = new FileReader();

             reader.onload = function () {

                var tempImage = new Image();
                tempImage.src = reader.result; // to get the base64 result

                var height = tempImage.height;
                var width = tempImage.width;
                if (height > 100) { // max height for our purposes is 100 pixels
                    width = width / (height / 100);
                    height = 100;
                }
                if (width > 150) { // max width for our purposes is 150 pixels
                    height = height / (width / 150);
                    width = 150;
                }
                var c = document.createElement('canvas');
                c.width = width;
                c.height = height;
                var ctx = c.getContext("2d");
                ctx.drawImage(tempImage, 0, 0, width, height);
                var b64str = c.toDataURL("image/jpeg"); // this is not base64, how can I get a base64 string?


                var localImage = {
                    originalImageURL: b64str,
                    origin: "local",
                    imageObject:{
                        result: b64str
                    }
                };

                $scope.suggestedImages.push(localImage);
                $scope.selectImage($scope.suggestedImages.length - 1); // Select new image
                $scope.$apply();

            };

            reader.readAsDataURL(file); //this initiates the loading of file to browser

       };

the problem is that "var b64str = c.toDataURL("image/jpeg");" yields a malformed string, it's not base64. If I were to guess I would think this line is incorrect, or I need to add some code here to convert the canvas to base64. The malformed string is "data:,", which looks the the beginning of a base64 string, but is truncated

Parameter at `.addLocalImage = function (file)` appear to be `file` , though `files[0]` passed to `reader.readAsDataURL(files[0])` ? — guest271314, Jan 24 '16 at 02:49
thanks, I actually simplified the code so that it would be more SO friendly, I just forgot to change files[0] to file, but good eye — Alexander Mills, Jan 24 '16 at 02:50
So what's the canvas for, `readAsDataURL` returns the image as a Base64 string anyway ? — adeneo, Jan 24 '16 at 02:51
the reason for canvas, is because canvas is necessary to convert the original base64 string which represents a 2 MG image, to a new base64 string that represents a smaller image. I believe canvas is in general the most common way to resize images, (probably unfortunately). — Alexander Mills, Jan 24 '16 at 02:53
@AlexMills Can include "malformed string" returned from `b64str` at Question ? — guest271314, Jan 24 '16 at 02:53
yeah the malformed string is "data:,", which looks the the beginning of a base64 string, but is truncated — Alexander Mills, Jan 24 '16 at 02:54
Can include entire string at Question ? `data:` is not "malformed string" ; it is `data URI` — guest271314, Jan 24 '16 at 02:55
@AlexMills _"the entire original base64 string?"_ Yes, entire `data URI`. `data:` is a protocol , see https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs — guest271314, Jan 24 '16 at 02:56
The canvas has to be in the DOM -> https://jsfiddle.net/f0b1so21/ — adeneo, Jan 24 '16 at 02:58
the first 100 or so chars are: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4TxmRXhp" — Alexander Mills, Jan 24 '16 at 02:59
Just try pasting the b64 string into the adressbar in Chrome, you should see an image if it's valid — adeneo, Jan 24 '16 at 03:01
Note that just the process of converting to B64 makes the image 30-40% larger in (byte)size. — adeneo, Jan 24 '16 at 03:04
that was the original base64 string I pasted above, the new base64 string is malformed — Alexander Mills, Jan 24 '16 at 03:04
yeah @adeneo that seems to work...I think there was both a problem with not putting the canvas in the DOM and with the image width/height.. — Alexander Mills, Jan 24 '16 at 03:08
it doesn't throw any errors, but for me it just converts the image to all black, original image is lost — Alexander Mills, Jan 24 '16 at 03:10
I need glasses, you're missing the `image.onload` handler, that's why it doesn't work -> https://jsfiddle.net/f0b1so21/3/ — adeneo, Jan 24 '16 at 03:14
thanks that seems to work, and it even works without document.body.appendChild(c); / document.body.removeChild(c); — Alexander Mills, Jan 24 '16 at 03:26
Yes, the appending only worked because it delayed long enough for the image to load. It loads quickly when using a b64 string that is already literally in the code, but the image still needs an onload handler to make it work properly and consistently — adeneo, Jan 24 '16 at 03:30
I'm pretty confident that is the real issue, posting an answer — adeneo, Jan 24 '16 at 03:33
really appreciate the help..if I have more questions, I might ask :) cheers — Alexander Mills, Jan 24 '16 at 03:33
sure I will accept your answer tomorrow if it continues to work as intended — Alexander Mills, Jan 24 '16 at 03:33

score 2 · Answer 1 · answered Jan 24 '16 at 03:35

The image needs an onload handler, so drawing to the canvas doesn't happen before the image has loaded

$scope.addLocalImage = function (file) {
     var reader = new FileReader();

     reader.onload = function () {
        var tempImage = new Image();

        tempImage.onload = function() {
            var height = tempImage.height;
            var width = tempImage.width;
            if (height > 100) { // max height for our purposes is 100 pixels
                width = width / (height / 100);
                height = 100;
            }
            if (width > 150) { // max width for our purposes is 150 pixels
                height = height / (width / 150);
                width = 150;
            }
            var c = document.createElement('canvas');
            c.width = width;
            c.height = height;
            var ctx = c.getContext("2d");
            ctx.drawImage(tempImage, 0, 0, width, height);
            var b64str = c.toDataURL("image/jpeg");

            var localImage = {
                originalImageURL: b64str,
                origin: "local",
                imageObject:{
                    result: b64str
                }
            };

            $scope.suggestedImages.push(localImage);
            $scope.selectImage($scope.suggestedImages.length - 1); // Select new image
            $scope.$apply();
        }
        tempImage.src = reader.result; // to get the base64 result
    }
    reader.readAsDataURL(file); //this initiates the loading of file to browser
}

Looking to convert canvas to base64 image

1 Answers1