我有一堆不同大小的图像.如何在保持比例的同时重新调整尺寸？

Question

这比听起来有点棘手,所以让我尽力解释.

我专门处理来自HM和Net-a-porter等网站的服装图像.我想将这些图像添加到我的网站,将它们垂直堆叠,以便创建一个装备.

我需要重新调整衬衫的尺寸,使其按比例放在牛仔裤上面.牛仔裤的尺寸固定为100px宽,250px长.当我将衬衫的大小调整到相同的宽度(100px)时,它有些匹配.使用不同的衬衫(也许是一个袖子较长,没有袖子等)将导致混合效果,并且不符合牛仔裤的100px宽度腰围.

保存后,这些图片在jpeg中包含一定量的空白区域,这些空白区域因图像而异.我尝试使用和不使用空白区域进行调整(通过将其裁剪到项目的边缘),但这也无济于事.

这一切都应该是一个自动化过程(比如在Polyvore的Pinterest上使用限幅工具),因此上述不能通过photoshop或手工完成,这使得它变得更加困难.

我的问题的屏幕截图可以在这里找到:

我也研究了像素计数器脚本,并想知道是否可以通过计算服装项目腰围的像素宽度(不包括所有白色像素数据)来完成大小调整？

我觉得我正在接触到"它无法完成,变化太多"的特殊情况,并且会喜欢某人至少指出我正确的方向.非常感谢!

Answer 1

使用 CSSmax-width和max-height设置比例。这将适当地缩放一切。

例如：

img { max-width: 100px; }

这是一个 JS 小提琴： http: //jsfiddle.net/KSzhS/

做起来并不太难。

这是我编写的一个函数，用于“基本上”执行相同的操作，但它不是分析服装，而是分析字母。它是用 PHP 编写的，但如果您可以使用 HTML5，您也可以在客户端执行此操作。

/**
* Function: Returns the space between letters, and the width of letters.
*           The first index is set to 0, as that is where it starts
*           Since spaces don't register (no pixels), strlen may not work.
* $image image cursor (from imagecreatetruecolor)
*/
function get_letter_dimensions($image)
{
   $bg           = imagecolorallocatealpha($image, 0, 0, 0, 127);
   $height       = imagesy($image) - 1; // was causing issues without
   $width        = imagesx($image);
   $bottom       = 0;
   $right        = 0;
   $letter_space = array(0=>0); // This holds the pixels between the letters
   $letter_width = array(0=>0); // This holds the width of the letters
   $y            = $height;
   $spacing      = 0;
   $lettering    = 0;
   $data         = array();

   for ($x = 0 ; $x < $width ; $x++) 
   {
      while((imagecolorat($image, $x, $y) == $bg) && ($y >= 1 )) $y--;

      if($y == 0) 
      {
         if($lettering) $letter_width[] = $lettering;
         $lettering = 0;
         $spacing++;
      }
      else
      {
         if($spacing) $letter_space[] = $spacing;
         $spacing = 0;
         $lettering++;
      }
      $y = $height;
   }

   foreach($letter_space as $k=>$val) $data[$k] = $val + $letter_width[$k];

   return $data;      
}

不过，您需要对其进行修改，以便它不会引入字母，但是您将从头开始，当您遇到不清晰或白色的像素时，您会标记它，然后从最后开始。然后你就会有你的参考点。

这只是一些简单的数学和服装分析。如果您对“腰线”匹配感兴趣，您可能需要从底部开始，然后向上查看衬衫的图像。然后您可以看到像素“线”的位置，这代表腰部的位置。并以此为基础进行计算。

因此，如果您想帮助自己，请开始echo使用提供的函数的结果，以便您可以看到它的样子

例子

------------------------------
------------------------------
------------------------------
------------------------------
-------**-------------**------
------*--*-----------*--*-----
-----*-------------------*----
------------------------------
----------***********---------
--***---------------------***-
------------------------------

也就是说，如果你从下往上看，你可以“看到”腰线在哪里。然后计算像素，并据此调整大小。您可以修改此功能以实现另一个自动裁剪功能。另外，如果您愿意，可以修改此函数，以便您可以从顶部开始，或者水平方向从任一侧开始。您甚至可以疯狂地允许使用偏移量。

一旦您设置了此类信息，您就可以真正开始了解您正在处理的内容。如果您处理的图像永远不会使用 0,0 处的像素，您可以尝试使用它作为背景颜色。这将有助于自动裁剪功能。

您进行的测量点越多，您的分析就越智能。如果您能够访问有关您正在查看的内容的信息，例如，您拥有与其他数据关联的图像，那么您可以采取一些捷径（这样您就不必进行大量分析来了解如果您正在使用“裤子”、“裙子”、“衬衫”和“连衣裙”）。

编辑：额外的想法

只是再想一下......这实际上是您正在做的一件非常巧妙的小事情，我正在考虑编写我自己的版本来娱乐。这是我一直在思考的一些事情。如何引入这些图像的实施非常重要。

• 您要从目录中提取所有数据吗？
• 您是否已将图像设置为不同，以便您了解要拉入的内容？
• 你知道什么图像是衬衫，什么图像是裤子吗？

您还可以设置一个“审查过程”，将偏移量存储在缩放后的原始图像上。这将允许您绕过计算，而只查找存储的数据。无论如何，“审查过程”将允许您仔细检查计算是否已设置，然后存储它们。

我不知道。如果我做了这样的事情，我会让你知道的。