Image resize before upload

Question

I need to provide a means for a user to upload photos to their web site in jpeg format. However, the photos are very large in original size, and I would like to make the re

Answer 1

Here some modifications to feed tensorflow.js(soo fast with it!!) with resized and cropped image (256x256px), plus showing original image under cropped image, to see what is cut off.

$("#image-selector").change(function(){


var file = $("#image-selector").prop('files')[0];   

var maxSize = 256;  // well now its minsize
var reader = new FileReader();
var image = new Image();
var canvas = document.createElement('canvas');
var canvas2 = document.createElement('canvas');     

var dataURItoBlob = function (dataURI) {
    var bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?
        atob(dataURI.split(',')[1]) :
        unescape(dataURI.split(',')[1]);
    var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var max = bytes.length;
    var ia = new Uint8Array(max);
    for (var i = 0; i < max; i++)
        ia[i] = bytes.charCodeAt(i);
    return new Blob([ia], { type: mime });
};

var resize = function () {
    var width = image.width;
    var height = image.height; 

    if (width > height) {           
        if (width > maxSize) { 
            width *= maxSize / height; 
            height = maxSize;
        }
    } else {
        if (height > maxSize) {
            height *= maxSize / width;
            width = maxSize;
        }           
    }
    if (width==height) { width = 256; height = 256; }


    var posiw = 0;
    var posih = 0;
    if (width > height) {posiw = (width-height)/2; }
    if (height > width) {posih = ((height - width) / 2);} 
    canvas.width = 256;
    canvas.height = 256;
    canvas2.width = width;
    canvas2.height = height;        
     console.log('iw:'+image.width+' ih:'+image.height+' w:'+width+' h:'+height+' posiw:'+posiw+' posih:'+posih);
    canvas.getContext('2d').drawImage(image, (-1)*posiw, (-1)*posih, width, height); 
    canvas2.getContext('2d').drawImage(image, 0, 0, width, height); 
    var dataUrl = canvas.toDataURL('image/jpeg');
    var dataUrl2 = canvas2.toDataURL('image/jpeg');     

        if ($("#selected-image").attr("src")) {
            $("#imgspeicher").append('<div style="width:100%; border-radius: 5px; background-color: #eee; margin-top:10px;"><div style="position: relative; margin:10px auto;"><img id="selected-image6" src="'+$("#selected-image").attr("src")+'" style="margin: '+document.getElementById('selected-image').style.margin+';position: absolute; z-index: 999;" width="" height=""><img id="selected-image2" src="'+$("#selected-image2").attr("src")+'" style="margin: 10px; opacity: 0.4;"></div><div class="row" style="margin:10px auto; text-align: left;"> <ol>'+$("#prediction-list").html()+'</ol> </div></div>');
        }

    $("#selected-image").attr("src",dataUrl);
    $("#selected-image").width(256);
    $("#selected-image").height(256);
    $("#selected-image").css('margin-top',posih+10+'px');
    $("#selected-image").css('margin-left',posiw+10+'px');      
    $("#selected-image2").attr("src",dataUrl2); 
    $("#prediction-list").empty();
    console.log("Image was loaded, resized and cropped");
    return dataURItoBlob(dataUrl);



};

return new Promise(function (ok, no) {

    reader.onload = function (readerEvent) {
        image.onload = function () { return ok(resize()); };
        image.src = readerEvent.target.result;
    };

let file = $("#image-selector").prop('files')[0];       
reader.readAsDataURL(file);});}); 

Html implementation:

<input id ="image-selector" class="form-control border-0" type="file">

<div style="position: relative; margin:10px auto; width:100%;" id="imgnow">
 <img id="selected-image" src="" style="margin: 10px; position: absolute; z-index: 999;">
 <img id="selected-image2" src="" style="margin: 10px; opacity: 0.4;">                       
</div> 

Also not resize to a maximum width/height, but to minimum. We get a 256x256px square image.

Answer 2

What jao and russau say is true. The reason being is JavaScript does not have access to the local filesystem due to security reasons. If JavaScript could "see" your image files, it could see any file, and that is dangerous.

You need an application-level control to be able to do this, and that means Flash, Java or Active-X.

Answer 3

Unfortunately you won't be able to resize the images in Javascript. It is possible in Silverlight 2 tho.

If you want to buy something already done: Aurigma Image Uploader is pretty impressive - $USD250 for the ActiveX and Java versions. There's some demos on the site, I'm pretty sure facebook use the same control.