0

I'm developing a small function for an image-upload. This image-upload resizes selected pictures on the client and upload the resized image.

This works, but the browser will hang a lot between "resizes-functionality". This is my code:

    function manageImage(file) {
        if (!file) return;
        var mime = file.type;
        var src = URL.createObjectURL(file);

        loadImage.parseMetaData(file, function (data) {
            var options = { maxWidth: 1920, maxHeight: 1920, canvas: true };
            if (data.exif) {
                options.orientation = data.exif.get('Orientation');
            }
            loadImage(file,
            function (img, test) {

                    loaded++;

                    var formData = new FormData();
                    formData.append("image", dataURI);

                    $.ajax({
                        url: "/URL",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        async: false,
                        type: "POST",
                        success: function (resp) {


                        }
                    }).error(function () {
                    }).done(function () {
                        if (loaded < checkedFiles.length) {
                                manageImage(files[loaded]);
                        } else {
                            //FINISHED
                        }
                    });

            },
            options);
        });
    }
    manageImage(files[0]);

This funcition is recursive, because i had some problems with the iteration (browser-hang, memory and cpu-usage).

Additionally, i'm using this library for EXIF-Data and correct orientation on mobile phones: https://github.com/blueimp/JavaScript-Load-Image

With one or two selected pictures (e.g. 7MB) it works perfect, but i want to upload maybe 50 pictures.

It would be great if someone can give me a clue?!

Improve this question
6
  • 2
    Am I reading this correctly. You want to process and up-load 50 7MB images from a mobile device. If that is so then you will just have to accept the fact that the phones just can not crusch and send that much data without delay. Commented Oct 19, 2015 at 22:21
  • @Blindman67 It is still lagging on my PC ;) Commented Oct 20, 2015 at 7:13
  • Even a PC will have a hard time. If they are 7MB jpgs that is in the 12+ mega pixel range which will expand to 12*4 (RGBA) 48MB+ per image. If you are doing the size reduction in Javascript it will take forever. Consider using the GPU to reduce the size of the image with ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, requiredWidth, requiredHeight) that should greatly improve throughput. Commented Oct 20, 2015 at 12:56
  • Thank you @Blindman67. You are right, but i'm doing this with the ctx.drawImage and it is still very slow... Maybe there is another way to improve the performance. Commented Oct 20, 2015 at 13:29
  • You are at the limits of technology, all you can do is get faster equipment. Though it may pay to carefully step through your code to make sure you are not holding the previous image when you start to load the next. You have not supplied enough code to see but because you are doing this recursively you may be holding a reference to previous images creating a memory bottleneck. Instead of recursion try setTimeout( function( manageImage( files[ loaded] ) ), 0 ) it might (?) improve performance a little. Commented Oct 20, 2015 at 14:00
Related questions
52
Image resize before upload
1
Image Preloading in Canvas
0
Speed up loading and drawing multi images in html5 canvas
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.