Image Resize

Resize images before uploading on server or after

Real Uploader can resize JPEG and PNG images before upload them on server, resize them directly on the user browser. The image resize is implemented using the PICA library, very fast and with very high quality. On Chrome and Firefox resizing a 3000x5000 image on browser takes only 1s with PICA library.
Real Upload provides also a thumbnail creation process on server side using the GD library of PHP. This is useful for creating a copy or a small preview on server and will not affect the main image.

Client Image resize

Real Uploader 4 has the following changes compared to Real Ajax Uploader

                        <div id="targetElement"></div>
    <script type="text/javascript">
        var uploader = new RealUploader("#targetElement", {
            accept: "image/*",
            resizeImage: {
                maxWidth:           200,
                maxHeight:          0,
                outputQuality:      1,
                scaleMethod:        3,
                outputFormat:       null,
                allowOverResize:    false,
                keepExif:           false,
                keepAspectRatio:    true,
                unsharpAmount:      0,
                unsharpThreshold:   0,
                alpha:              true
            },
        });
    </script>
    
                    

Options explained

  • maxWidth set the new width of the image
  • maxHeight set the new height of the image
  • outputQuality set the output quality of range 0-1, this is used to set the canvas quality. For more see toBlob
  • scaleMethod set internal algorithm to use of the image resize (derived from PICA library). Values goes from 0 to 3. 0 is the fastest method for scaling nearest neighbor, 1 use the Hamming scale, 2 uses Lanczos scale with window 2, 3 uses Lanczos scale with window 3.
  • outputFormat Set the output format of the new image. By default is the same as the original image but can be set to png or jpg
  • allowOverResize This option can be used to allow over scale image. By default is set to false, so images will not be scaled if the given dimensions are bigger than the original image dimensions.
  • keepExif If the ExifReader option is enabled (commercial version) then on resize the original exif of the image will be copied in the scaled image. When resizing images on browser using the CANVAS element the exif is removed. This option allow to avoid this.
  • keepAspectRatio set to keep the image aspect ration or not. If maxWidth or maxHeight option are given then the image will be scaled to fit this size without stretching it. If this option is set to false, then the image will be scaled to the exact given dimension maxWidth and maxHeight (if both are given) stretching the original image.
  • unsharpAmount Correct the sharp mask during resize, bigger value means shaper image. The allowed range is 0 to 500. Derived from PICA library. For more see Unsharp
  • unsharpThreshold controls the minimum brightness change that will be sharpened or how far apart adjacent tonal values have to be before the filter does anything
  • alpha use the alpha channel. Seems to be useless

Server Image resize

Thumbnail or image resize on server side can be done using the following options. By default this resize keeps aspect ratio and does not override the original images, just creates another copy on server.

                        <div id="targetElement"></div>
    <script type="text/javascript">
        var uploader = new RealUploader("#targetElement", {
            accept: "image/*",
            thumbHeight:            200,
            thumbWidth:             0,
            thumbPostfix:           '_thumb',
            thumbPath:              '',
            thumbFormat:            ''
        });
    </script>
    
                    

Options explained

  • thumbWidth Set the maximum height of the image thumbnail to generate on server
  • thumbHeight Set the maximum height of the image to thumbnail on server
  • thumbPostfix Set the postfix of the generated re-sized image, this will be added to the original file name. Example: my_picture.jpg thumbnail will be my_picture_thumb.jpg
  • thumbPath Set the path on server where to upload the re-sized image. By default the image is put in the same position as the original image.
  • thumbFormat Set the thumbnail export format, by default same as original image. Possible values use from the GD library are jpg, png, gif