On-the-fly image resizing on load

Need a code to change the size of the uploaded image on the fly and then upload it to the site, without uploading the original, how to implement it?


Answer 1, authority 100%

You can’t change it on the client side.

You can do this:
an iframe is created that sends a picture without reloading the page, after that the following actions are already on the server:

$img  = fl::save_image($_FILES['my_file'], $dir, $width, $height);
// --------------------------------------------------------------------
    //   
    //        
    public static function save_image($file, $dir = UPLOAD_FILE_DIR, $width = false, $height = false, $name = '')
    {   
        @$params = getimagesize($file["tmp_name"]);
        if($params[2] == 1 || $params[2] == 2 || $params[2] == 3)
        {
            $data     = explode("/", $file["type"]);
            if($data[1]=='jpeg') $data[1] = 'jpg';
            if(empty($name))
                $name     = md5(time()+rand(1, 1000)).".".$data[1];
            $file_path = self::save_file($file,$dir,$name);
            if($width != false || $height != false)
                self::resize_image($file_path, $file_path, $width, $height);
        }
        return $name;
    }
    // --------------------------------------------------------------------
    //   
    public static function resize_image($oldImage, $newImage, $newWidth = false, $newHeight = false){
        $source_src = $oldImage;
        $params = getimagesize($source_src);
        switch ( $params[2] ) {
            case 1: $source = imagecreatefromgif($source_src); break;
            case 2: $source = imagecreatefromjpeg($source_src); break;
            case 3: $source = imagecreatefrompng($source_src); break;
        }
        if (($newWidth != false && $params[0]>$newWidth) || ($newHeight != false && $params[1]>$newHeight)) 
        {
            if($newWidth != false) {$koef = $params[0] / $newWidth; $newHeight = floor($params[1] / $koef);}
            elseif($newHeight != false) {$koef = $params[1] / $newHeight; $newWidth = floor($params[0] / $koef);}
            $resource = imagecreatetruecolor($newWidth, $newHeight);
            imagecopyresampled($resource, $source, 0, 0, 0, 0,
            $newWidth, $newHeight, $params[0], $params[1]);
            $resource_src = $newImage;
            imagePng($resource, $resource_src);
        }
    }
    // --------------------------------------------------------------------

Answer 2, authority 50%

There is no solution for these languages: javascript does not have access to uploaded files, PHP has access only to what is on the server.
Solutions are presented in Flash, Silverlight, ActiveX(theoretically)…

Well, you can also force the user to resize or write your own toolbar. But this is already completely perverted.

updfor update:
jquery won’t help here, unfortunately.


Answer 3, authority 50%

Alternatively, use the FileReader()API to access the image, and then to canvas and sending the binary to the server.

var files = event.target.files || event.dataTransfer.files;
var file = event.target.files[0];
if (file.type.indexOf("image") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
            var image = new Image();
            image.src = e.target.result;
            image.onload = function() {
            // go manipulation with image
        }
    }
}

Here’s something similar in implementation (HTML5 and jQuery only, no PHP, GD, etc.): JQuery CropBox


Answer 4

A very simple task, upload the image to the server, then resize it and save it, and delete the original.