resize image with canvas and FileReader

Question

I have javascript code that was running fine on the server for about 2 weeks. After an update of Chrome it stops working :(

function doUpload() {
    var file = document.getElementById('fileToUpload').files[0];
    EXIF.getData(file, function () {
            var orientation = 0; 
            orientation = EXIF.getTag(this, "Orientation"); 
            var dataUrl = "";
            var img = document.createElement("img");   // Create an image
            var reader = new FileReader();    // Create a file reader

            reader.onload = function(e) {   // Set the image once loaded into file reader
                img.src = e.target.result;

                var canvas = document.createElement("canvas");   

                var MAX_WIDTH = 1080;  // Set Width and Height
                var MAX_HEIGHT = 1080;
                var width = img.width;
                var height = img.height;

                console.log(img.width);

                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                ....

The problem is that img.width and img.height are both 0. Because of that it is impossible to resize the image. If I add console.log(img) I get <img src="data:image/jpeg:base 64, 9/j/ 4xg....> so I guess the image is properly loaded into the file reader but than something prevents the code from working. I´m struggling with this from last week with no luck. Does anyone see the problem?

Thanks

edit

here is the working code:

function doUpload() {
    var file = document.getElementById('fileToUpload').files[0];
    EXIF.getData(file, function () {
            var orientation = 0; 
            orientation = EXIF.getTag(this, "Orientation"); 
            var dataUrl = "";
            var img = document.createElement("img");   // Create an image
            var reader = new FileReader();    // Create a file reader

            reader.onload = function(e) {   // Set the image once loaded into file reader

                var canvas = document.createElement("canvas");   

                img.src = e.target.result;

                img.onload = function(){

                var MAX_WIDTH = 1080;  // Set Width and Height
                var MAX_HEIGHT = 1080;
                var width = img.width;
                var height = img.height;

                console.log(img);

I'm guessing you need your code that uses the image inside `img.onload = function() { ... }` — apsillers, Apr 17 '17 at 17:22
Hi apsillers. thanks for the reply. I´m not sure (I´m new to javascript) but I guess img.src = e.target.result; does the job. It was working perfectly with chrome until the google update :( — fre4567, Apr 17 '17 at 17:30
It does do the job, but it may do the job some time in the future, after your `reader.onload` function finishes. See http://stackoverflow.com/questions/16084374/jquery-width-and-height-return-0-for-img-element. An image object can have a `src` string set but not actually have that contents of that resource loaded yet. I'm not totally sure that's your issue, but it seems possible. Also, what `FileReader` method are you using the initiate the file load? — apsillers, Apr 17 '17 at 17:34

resize image with canvas and FileReader

0 Answers0