Preview image before uploading + ImageResizing.net

Navigation
1

In a few minutes looking for a way to show an preview of an image before uploading it, I found the great 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]);
});

However, I use a imageresizing.net library that wanted to use one of its features so that preview is displayed with crop and center-aligned.

In my case I am using the code below and I was not successful 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 preview where I can take advantage of imageresizing ?

    
asked by anonymous 04.04.2014 / 20:49

2 answers

3

You can do this using the canvas element of 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 based on in this SOEN response .

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

p>     
05.04.2014 / 01:52
0

I believe your best bet in this direction would be to actually upload the AJAX image to a temporary working directory and serve it on time, instead of loading it with FileReference . This would also make the solution more compatible since FileReference only works in 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 save it to the final destination.

Is it a requirement that you preview the image without uploading absolutely anything or is it just not to leave the page?

If it's for the second reason, there are several plug-ins today that can send a file without leaving the page and have call-backs so you can respond when the file is finished, such as link

    
04.04.2014 / 22:22
How to pass data from an SQLite table to several EditText fields Pass information from a selected item in the list to EditText