34

I have 100,000 images which are not under my control. Some of these images are excellent in that the image stretches to the boundaries whilst some have excessive amounts of white space.

When there is excessive white space it makes the page look terrible and means images on the screen all look like they are different sizes.

You can see what I mean here:

http://www.fitness-saver.com/uk/shop/mountain-bikes/

What I have been hunting for is a jQuery method of cropping the images and removing the whitespace automatically.

1) The amount of whitespace is different in every image 2) The ratios of the images are different 3) I want to use javascript rather than pre-processing the images.

I hope you can help!

Edit: Here's an example image - http://images.productserve.com/preview/3395/128554505.jpg. Note the images come from various affiliate sites and are definitely from a different domain.

6
  • 2
    Can I suggest that you actually add one of the images that the problem occurs on to your question. It'll prevent votes to close because you're effectively advertising your site. Aug 29, 2012 at 10:40
  • 1
    You can draw the image on a canvas and remove entire blank columns and rows, and rescale the images to the 'same' size(keeping aspect ratio).
    – Prusse
    Aug 29, 2012 at 10:40
  • 2
    "I want to use javascript rather than pre-processing the images" - Why? Why would you want the users browser to have to remove white space every single time a picture is loaded rather than just doing it once on the server side, and then saving the picture without white spacing to use in the future?
    – h2ooooooo
    Aug 29, 2012 at 11:37
  • 1
    @h2ooooooo Because the OP has no control over the images. He gets the images from images.productserve.com Aug 29, 2012 at 11:45
  • 4
    ...and that image host allows remote linking to images but not remote downloading? You could just write a server-side script that downloads the image, processes it and saves the remote filename so that it knows not to save duklicates.
    – Jan
    Aug 29, 2012 at 12:24

2 Answers 2

56

To analyse the blank spaces in an image, the only way I know is to load that image into a canvas:

var img = new Image(),
    $canvas = $("<canvas>"), // create an offscreen canvas
    canvas = $canvas[0],
    context = canvas.getContext("2d");

img.onload = function () {
   context.drawImage(this, 0, 0); // put the image in the canvas
   $("body").append($canvas);
   removeBlanks(this.width, this.height);
};

// test image
img.src = 'http://images.productserve.com/preview/1302/218680281.jpg';

Next, use the getImageData() method. This method returns an ImageData object that you can use to inspect each pixel data (color).

var removeBlanks = function (imgWidth, imgHeight) {
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height),
             data = imageData.data,
           getRBG = function(x, y) {
                      return {
                        red:   data[(imgWidth*y + x) * 4],
                        green: data[(imgWidth*y + x) * 4 + 1],
                        blue:  data[(imgWidth*y + x) * 4 + 2]
                      };
                    },
          isWhite = function (rgb) {
                      return rgb.red == 255 && rgb.green == 255 && rgb.blue == 255;
                    },
            scanY = function (fromTop) {
                      var offset = fromTop ? 1 : -1;

                      // loop through each row
                      for(var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {

                        // loop through each column
                        for(var x = 0; x < imgWidth; x++) {
                            if (!isWhite(getRBG(x, y))) {
                                return y;                        
                            }      
                        }
                    }
                    return null; // all image is white
                },
            scanX = function (fromLeft) {
                      var offset = fromLeft? 1 : -1;

                      // loop through each column
                      for(var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {

                        // loop through each row
                        for(var y = 0; y < imgHeight; y++) {
                            if (!isWhite(getRBG(x, y))) {
                                return x;                        
                            }      
                        }
                    }
                    return null; // all image is white
                };


        var cropTop = scanY(true),
            cropBottom = scanY(false),
            cropLeft = scanX(true),
            cropRight = scanX(false);
    // cropTop is the last topmost white row. Above this row all is white
    // cropBottom is the last bottommost white row. Below this row all is white
    // cropLeft is the last leftmost white column.
    // cropRight is the last rightmost white column.
};

Frankly I was unable to test this code for a good reason: I came across the infamous "Unable to get image data from canvas because the canvas has been tainted by cross-origin data." security exception.

This is not a bug, it is an intended feature. From the specs:

The toDataURL(), toDataURLHD(), toBlob(), getImageData(), and getImageDataHD() methods check the flag and will throw a SecurityError exception rather than leak cross-origin data.

This happens when drawImage() loads files from external domains, which causes the canvas's origin-clean flag to be set to false, preventing further data manipulations.

I am afraid you will run into the same problem, but anyway, here is the code.

Even if this works on client side, I can imagine how miserable will be performance-wise. So, as Jan said, if you can download the images and pre-process them on the server side, that would be better.


Edit: I was curious to see if my code would really crop an image, and indeed it does. enter image description here

You can check it out here

It only works for images from your domain, as stated before. You can choose your own image with white background and change the last line:

// define here an image from your domain
img.src = 'http://localhost/strawberry2.jpg'; 

Obviously, you will need to run the code from your domain, not from jsFiddle.


Edit2: If you want to crop and scale up to keep the same aspect ratio, then change this

var $croppedCanvas = $("<canvas>").attr({ width: cropWidth, height: cropHeight });

// finally crop the guy
$croppedCanvas[0].getContext("2d").drawImage(canvas,
    cropLeft, cropTop, cropWidth, cropHeight,
    0, 0, cropWidth, cropHeight);

to

var $croppedCanvas = $("<canvas>").attr({ width: imgWidth, height: imgHeight });

// finally crop the guy
$croppedCanvas[0].getContext("2d").drawImage(canvas,
    cropLeft, cropTop, cropWidth, cropHeight,
    0, 0, imgWidth, imgHeight);

Edit3: One fast way to crop images on the browser, is to parallelize the workload through the use of Web Workers, as this excellent article explains.

7
  • Thanks for your detailed response. Is there no equivalent security work-around like you get with Javascript and JSONP? Aug 29, 2012 at 16:44
  • If the affiliate sites return the image URL as JSON, you might try to wrap the JSON response in a javascript function see en.wikipedia.org/wiki/JSONP Also, I notest the new HTML5 crossorigin attribute that allows to read images from foreign domains, BUT the server (your affiliates) must allow that by having a Access-Control-Allow-Origin header, see developer.mozilla.org/en-US/docs/CORS_Enabled_Image I introduced that new property in the jsFiddle code Aug 29, 2012 at 17:39
  • @DaveHilditch Web workers is another way to go (see my edit3) May 23, 2013 at 13:55
  • In your img.onload function, in the code above you are missing $("body").append($canvas); , which you have in the jsfiddle
    – AllisonC
    May 22, 2017 at 14:21
  • If this doesn't work for you, make sure you've also used code from Edit2 and your canvas has canvas.height and canvas.width properly set - note that it is NOT the same as CSS width/height - that didn't work for me.
    – jave.web
    Aug 21, 2017 at 19:43
21

Based on the great answer that provided by Jose Rui Santos, I've changed his code to work with just image object without jQuery library to be loaded.

The return of this function is cropped image data URL to be used directly in image element.

/*
    Source: http://jsfiddle.net/ruisoftware/ddZfV/7/
    Updated by: Mohammad M. AlBanna
    Website: MBanna.info 
    Facebook: FB.com/MBanna.info
*/

var myImage = new Image();
myImage.crossOrigin = "Anonymous";
myImage.onload = function(){
    var imageData = removeImageBlanks(myImage); //Will return cropped image data
}
myImage.src = "IMAGE SOURCE";



//-----------------------------------------//
function removeImageBlanks(imageObject) {
    imgWidth = imageObject.width;
    imgHeight = imageObject.height;
    var canvas = document.createElement('canvas');
    canvas.setAttribute("width", imgWidth);
    canvas.setAttribute("height", imgHeight);
    var context = canvas.getContext('2d');
    context.drawImage(imageObject, 0, 0);

    var imageData = context.getImageData(0, 0, imgWidth, imgHeight),
        data = imageData.data,
        getRBG = function(x, y) {
            var offset = imgWidth * y + x;
            return {
                red:     data[offset * 4],
                green:   data[offset * 4 + 1],
                blue:    data[offset * 4 + 2],
                opacity: data[offset * 4 + 3]
            };
        },
        isWhite = function (rgb) {
            // many images contain noise, as the white is not a pure #fff white
            return rgb.red > 200 && rgb.green > 200 && rgb.blue > 200;
        },
                scanY = function (fromTop) {
        var offset = fromTop ? 1 : -1;

        // loop through each row
        for(var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {

            // loop through each column
            for(var x = 0; x < imgWidth; x++) {
                var rgb = getRBG(x, y);
                if (!isWhite(rgb)) {
                    if (fromTop) {
                        return y;
                    } else {
                        return Math.min(y + 1, imgHeight);
                    }
                }
            }
        }
        return null; // all image is white
    },
    scanX = function (fromLeft) {
        var offset = fromLeft? 1 : -1;

        // loop through each column
        for(var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {

            // loop through each row
            for(var y = 0; y < imgHeight; y++) {
                var rgb = getRBG(x, y);
                if (!isWhite(rgb)) {
                    if (fromLeft) {
                        return x;
                    } else {
                        return Math.min(x + 1, imgWidth);
                    }
                }      
            }
        }
        return null; // all image is white
    };

    var cropTop = scanY(true),
        cropBottom = scanY(false),
        cropLeft = scanX(true),
        cropRight = scanX(false),
        cropWidth = cropRight - cropLeft,
        cropHeight = cropBottom - cropTop;

    canvas.setAttribute("width", cropWidth);
    canvas.setAttribute("height", cropHeight);
    // finally crop the guy
    canvas.getContext("2d").drawImage(imageObject,
        cropLeft, cropTop, cropWidth, cropHeight,
        0, 0, cropWidth, cropHeight);

    return canvas.toDataURL();
}
5
  • 1
    Why did you add +10; makes no sense and you made me lose a lot of time trying to find the bug Jul 25, 2017 at 1:56
  • @IvanCastellanos Thanks for the edits! I added it in the code because of the cropped image was having a text, and I needed a little space on the bottom and the right. Sorry for that. Jul 25, 2017 at 12:44
  • Thanks. Your code really helped me out. I have posted a small error correction to your code: It was alway cropped 1px from right and from bottom TOO MUCH. (Reproduction: repeat the cropping multiple times will shrink alway 1 additional pixel on these sites.)
    – Lutz
    Sep 19, 2019 at 11:12
  • @MohammadAlBanna Does this remove around the edges or everywhere even within the image? Does it stop scanning when an edge has been discovered? Is the suggestions that Ivan mention in the code in this answer here?
    – mjs
    Jul 4, 2020 at 21:10
  • This also do not seem to adhere to css width height restrictions.
    – mjs
    Jul 4, 2020 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.