Question

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

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

我需要重新调整衬衫的尺寸，使其成比例地位于牛仔裤的顶部。牛仔裤的尺寸固定为100px宽，250px长。当我将衬衫的大小调整到相同的宽度（100px）时，它有些匹配。使用不同的衬衫（也许是一个袖子较长，没有袖子等）将导致混合效果，并且不符合牛仔裤的100px宽度腰围。

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

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

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

enter image description here

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

我觉得我正在触及那个特殊的“它无法完成，变化太多”，并且会喜欢某人至少指出我正确的方向。非常感谢！

Answer 1

使用CSS max-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像素的图像，您可以尝试将其用作背景颜色。这对自动裁剪功能有帮助。

您制作的测量点越多，您的分析就越智能。如果您可以访问有关您正在查看的内容的信息，例如，您将图像与其他数据相关联，那么您可以采取一些快捷方式（因此您无需进行大量分析即可了解如果您正在使用“裤子”，“裙子”，“衬衫”和“连衣裙”）。

编辑：其他想法

只是想到这一点......这实际上是你正在做的一件非常简洁的小事，我正在考虑编写我自己的版本以获得乐趣。这是我一直在考虑的一些东西。实现如何拉入这些图像非常重要。

您是从目录中提取所有数据吗？
您是否已将图像设置为不同，以便您了解自己所处的内容？
你知道什么形象是衬衫，什么形象是一条裤子？

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

我不知道。如果我这样做，我会告诉你的。

Answer 2

使用没有高度的图像的width属性。调整图像的大小，保持纵横比。例如：

<img src="yourpic.jpg" width="100px">

不要包含height属性，因为它会改变它的高度以外的高度。只需更改宽度值，直到它与您想要的大小匹配。希望有所帮助。

Answer 3

调整图像大小无助于缩小图像尺寸，是的，当图像缩小到原始尺寸时，图像可以在某种程度上模糊效果。

首先明确要求 1）为什么要调整图像大小？根据您的要求，解决方案将有所不同。 2）如果你想要将图像大小调整到它的比例，那么你将需要Photoshop工具到你需要的尺寸，这将减小图像尺寸并保持清晰度。 3）如果你想通过保持原始比例来调整图像大小，那么请阅读我的第一个声明。

希望这将清除图像的使用。

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

3 个答案:

实施例

编辑：其他想法