向图像添加空格并将文件保存到服务器答案

【问题标题】：Add whitespace to image and save file to server向图像添加空格并将文件保存到服务器
【发布时间】：2012-01-05 10:46:24
【问题描述】：

我有一个脚本可以为时事通讯生成一些 HTML。我正在使用“align=left”浮动图像并在其周围环绕文字。我使用内联 CSS 样式，在本例中为 margin-right，给图像一些喘息的空间。 Outlook 忽略了这一点。 Outlook 也忽略了填充 - 我什至尝试了 10 像素的边框，它也忽略了这一点。

我无法更改布局并将图像放在表格中。我正在考虑使用 GD 来操作图像，在其右侧添加 8px 的空白。问题是，由于这是发给成千上万人的时事通讯，因此我需要将修改后的图像保存到服务器的某个地方，以便我可以链接到它。我不想动态生成这个。

我对 GD 或使用 PHP 将文件保存到某个位置的经验为零。这是我的图片代码：

<img alt="<?php print $main2['title']; ?>" height="127" width="185" src="http://www.mydomain.com/uploads/<?php print $main2['filename']; ?>" align="left" style="margin:8px 8px 0 0;"/>

【问题讨论】：

非基于 Web 的邮件客户端的行为与网页的行为或应有的行为不完全相同，并且它们不一定遵守 Web 标准，尤其是 Outlook；您必须采取更具体的方法来处理这种兼容性。 Outlook has predefined support for certain HTML.
我非常肯定用空格填充图像本身不是解决您的问题的正确方法。为什么不问一个 html/css 问题“我如何让它在 Outlook 中看起来正确”？

标签： php image-processing gd

【解决方案1】：

您当然可以将 CSS 用于时事通讯 - 仅限某些属性，并且是内联的。我们开展了一系列非常成功的活动，并且新闻通讯看起来适合每个人。

我们的网络服务器上有一个文件夹，其中有几千个修改过的小图像，这不是问题。

我们不能改变布局，好吧，因为这是一些重要人物想要的——重要人物付给我一大笔钱来实现他们想要的。是的，我可以对此大发雷霆并可能说服他们，但如果我可以反过来花几个小时让它发挥作用，为什么不呢？

FWIW，我确实设法通过 GD 完成了这项工作 - 并没有我想象的那么复杂 - 如果其他人需要，我会发布脚本：

// get image
$url = 'myimage.jpg';
$src = imagecreatefromjpeg($url);

// dimensions (just to be safe, should always be 185x127 though)
$src_wide = imagesx($src);
$src_high = imagesy($src);

// set white padding color
$clear = array('red'=>255,'green'=>255,'blue'=>255);

// new image dimensions with right padding
$dst_wide = $src_wide+8;
$dst_high = $src_high+8;

// New resource image at new size
$dst = imagecreatetruecolor($dst_wide, $dst_high);

// fill the image with the white padding color
$clear = imagecolorallocate( $dst, $clear["red"], $clear["green"], $clear["blue"]);
imagefill($dst, 0, 0, $clear);

// copy the original image on top of the new one
imagecopymerge($dst,$src,0,8,0,0,$src_wide,$src_high, 100);

// store the new image in tmp directory
$pth = 'tmp/myimage.jpg';
imagejpeg($dst, $pth, 100);

// free resources
imagedestroy($src);
imagedestroy($dst);

【讨论】：

【解决方案2】：

您应该首先避免使用 css 作为时事通讯，因为您不能依赖它，除非您制作它的纯文本版本。

对于这个简单的问题，这种方法似乎有点矫枉过正。另外事实上，您的图像将永远被修改。如果您将时事通讯发送给成千上万的人，其中包含 css，我认为您应该首先确保您的客户都能够正确检查它。

你说不能改变布局，请问为什么？

现在，要回答您的问题，您不需要 GD 来执行此操作，您只需编写一个脚本来批量“转换”您的图像，并为您的时事通讯准备好它们。

例如：http://www.imagemagick.org/Usage/thumbnails/#pad

两个建议

第一

尝试在您的时事通讯中使用表格而不是 css，您将能够在表格中有效地填充表格。

第二

首先检查问题，设计是一个问题，如果您想正确接触所有订阅者，这一点非常重要。看看mailchimp免费账户，你可以设置一个通讯模板全部免费测试，你将能够检查生成的代码。

【讨论】：

【解决方案3】：

您可以使用 gif 分隔符（老派 html 是的）：

<img alt="" height="127" width="8" src="http://www.mydomain.com/spacer.gif" align="left" />

Spacer 是一个简单的 1x1 透明像素，你用 html 属性给它你需要的大小，这应该可以解决问题。

顺便说一句，您的主要问题实际上是您如何构建 html/css。这里有一些关于如何处理跨客户端 html 电子邮件的优秀资源：http://www.campaignmonitor.com/design-guidelines/

【讨论】：