Image preview before Upload + Imageresizing.net

Asked

Viewed 4,041 times

2

In a few minutes looking for a way to show the preview of an image before the upload of the same, I found the magnificent solution:

$("##ID DO INPUT FILE##").change(function (event) {
    var reader = new FileReader();
    $(reader).load(function (event) {
        $("##ID DO ELEMENTO IMG##").attr("src", event.target.result);
    });
    reader.readAsDataURL(event.target.files[0]);
});

But I use a library imageresizing.net who wanted to use one of its features so that the preview be shown with Crop and aligned to the center.

In my case I am using the code below and did not succeed because the output of the image is a Base64

function readfile(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        $('#image_preview').attr('src', e.target.result);
                    };

                    reader.readAsDataURL(input.files[0] + "?w=340&h=260&mod=crop&format=png");
                }
            }

            $("#upload").change(function() {
                readfile(this);
            });

Is there any other way to show the preview where I can enjoy the imageresizing?

javascript jquery file-upload

  • You managed to solve the problem?

  • I ended up solving my problem using the upload plugin http://jasny.github.io/bootstrap/javascript/#fileinput was what most fit my need.

  • Could you post an answer? So everyone can know that this issue no longer needs attention, and besides, anyone who needs it in the future can use the same solution.

2 answers

4


You can do this using the element canvas HTML5.

function showThumbnail(files) {
    loadImage(files[0]);
    counter = 0;
    function loadImage( file ) {
        var canvas = document.createElement("canvas"),
            img = new Image();

        img.onload = function() {
            var w = img.width / 10, h = img.height / 10;
            canvas.width = w;
            canvas.height = h;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, w, h);

            // configurações de crop
            var sourceX = img.width * 0.30,
                sourceY = img.height * 0.30,
                sourceWidth = img.width * 0.40,
                sourceHeight = img.height * 0.40;

            ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, w, h);
            URL.revokeObjectURL( img.src );
            img = null;

            if (files.length > counter) {
                counter++;
                loadImage(files[counter]);
            }
        };

        var URL = window.URL || window.webkitURL;

        img.src = URL.createObjectURL( file );

        var thumbnail = document.getElementById("thumbnail");
        thumbnail.appendChild(canvas);
    }
}

Example in jsfiddle

My example was built on the basis in this SOEN response.

And in this article on how to do Crop: HTML5 Canvas Image Crop Tutorial

  • I found this very interesting example, but I wanted to use imageresizing.net to display the preview because the user would be aware of how the image would look when it was displayed on the page, already its example cuts parts of the image to which it will appear when the real image is displayed to the user.

1

I believe your best bet in this direction would be to actually upload the image via AJAX to a temporary work directory and serve it on time, rather than load it with FileReference. This would also make the solution more compatible, since FileReference only works on some modern browsers.

Note that many sites already do this. You upload the figure and work with it to make the cut and then apply the transformations and saved in the final destination.

It is a necessary requirement that you preview the image without going up at all or it is just not to leave the page?

If it’s for the second reason, today there are several plug-ins that can send a file without leaving the page and have call-backs so you can respond when the file has finished uploading, such as http://zurb.com/playground/ajax-upload

Browser other questions tagged javascript jquery file-upload

You are not signed in. Login or sign up in order to post.