我有 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 运行代码。
编辑2:如果您想裁剪并放大以保持相同的纵横比,请更改此
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();
}