我有 100,000 张不受我控制的图像。其中一些图像非常出色，因为图像延伸到边界，而有些则具有过多的空白。
当有过多的空白时，它会使页面看起来很糟糕，并且意味着屏幕上的图像看起来都像是不同的大小。
你可以在这里看到我的意思：
http://www.fitness-saver.com/uk/shop/mountain-bikes/
我一直在寻找的是一种裁剪图像并自动删除空白的 jQuery 方法。
1）每张图像的空白量不同 2）图像的比例不同 3）我想使用 javascript 而不是预处理图像。
我希望你能帮忙！
编辑：这是一个示例图像 - http://images.productserve.com/preview/3395/128554505.jpg。请注意，这些图片来自不同的附属网站，并且肯定来自不同的域。
要分析图像中的空白，我知道的唯一方法是将图像加载到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';
接下来，使用getImageData()方法。此方法返回一个 ImageData 对象，您可以使用该对象检查每个像素数据（颜色）。
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.
};
坦率地说，我无法测试这段代码是有充分理由的：我遇到了臭名昭著的“无法从画布获取图像数据，因为画布已被跨域数据污染。 ”安全异常。
这不是错误，而是预期的功能。从规格：
toDataURL()、toDataURLHD()、toBlob()、getImageData() 和 getImageDataHD() 方法检查标志并将抛出 SecurityError 异常而不是泄漏跨域数据。
当drawImage()从外部域加载文件时会发生这种情况，这会导致画布的origin-clean标志设置为 false，从而阻止进一步的数据操作。
恐怕你会遇到同样的问题，但无论如何，这里是代码。
即使这在客户端有效，我可以想象在性能方面会有多糟糕。因此，正如 Jan 所说，如果您可以下载图像并在服务器端对其进行预处理，那就更好了。
编辑：我很好奇我的代码是否真的会裁剪图像，确实如此。
你可以在这里查看
如前所述，它仅适用于您域中的图像。您可以选择自己的白色背景图像并更改最后一行：
// define here an image from your domain
img.src = 'http://localhost/strawberry2.jpg';
显然，您需要从您的域运行代码，而不是从 jsFiddle。
Edit2：如果你想裁剪和放大以保持相同的纵横比，然后改变这个
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);
到
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：在浏览器上裁剪图像的一种快速方法是通过使用Web Workers并行化工作负载，正如这篇优秀的文章所解释的那样。
根据 提供的出色答案Jose Rui Santos，我已将他的代码更改为仅使用image对象而无需加载 jQuery 库。
此函数的返回是裁剪后的图像数据 URL，可直接在图像元素中使用。
/*
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();
}