3

我不确定标题是否传达了解决我问题的最佳方法，所以让我退后一步。

我的公司正在建立一个广告联盟计划。我们有一个小部件，它将很快显示在众多网页上，并且该小部件将包含一个广告块，该块将显示来自我们的附属零售商的各种广告。

我们需要一个解决方案，让我们能够快速（并使用尽可能多的自动化）为不同的产品制作数千个广告。不幸的是，我们的广告管理服务 (Google Ad Manager) 只接受基于图片的广告素材（它实际上接受 Flash，但我们不想使用它）。如果有人有任何建议，接受 HTML 广告的广告管理服务也可能是一个可行的解决方案。

来自 Web 开发世界，我们最初的想法是创建一个基于浏览器的 UI，允许非技术人员输入广告的所有内容（产品名称、MSRP、销售价格、产品评论等）和它的尺寸。使用此信息，应用程序将在输入表单旁边的“预览”<div> 中布置广告，以使用户能够查看和更新​​广告的布局和内容。然后，他们可以使用此 HTML 预览来调整文本、产品图像大小等，最终得到可接受的广告布局。

对我们来说，这一切似乎都是可以实现的。棘手的部分是找出一种有效且可扩展的方法，将我们可以在浏览器中看到的 HTML 预览转换为相当高质量的图像。我们可以在每个广告完成后截取页面的屏幕截图，但这需要几个额外的步骤 - 将屏幕截图复制到图像编辑器中、裁剪、保存并将其上传到我们的服务器，以便我们可以将 Google Ad Manager 指向图片的网址。将这些步骤乘以成千上万的广告，这将使该过程比我们认为需要的更加繁琐。

所以，我最终在寻找一种方法——无论是浏览器插件、书签、使用 Ruby、Java 或 JavaScript 等在服务器端或客户端执行此操作的方法——将我们在浏览器窗口以尽可能少的步骤进入我们服务器上的图像。

不管它如何工作，似乎无论截取屏幕截图都必须了解 HTML/CSS 渲染的概念，以了解广告“图像”的末端在哪里（如其父 HTML 元素的尺寸和位置），或者能够在空白的白色页面背景下仅裁剪出广告方块（我正在考虑使用魔术棒工具的 Photoshop 动作）。

如果有人有任何想法或建议要分享，我将非常感激！

4

4 回答 4

2

您是否可以使用服务器端语言来创建图像，而不是创建 HTML 预览，这也可以作为预览图像依赖？例如，使用 PHP 的GD 和图像函数，您可以拥有一个接受 GET 参数的服务器端脚本，例如：

http://my.server.tld/ads/adpreview.php?Product=Product+Name&MSRP=$19.99

在 PHP 脚本中，您将使用 imagecreatetruecolor 函数创建高质量的空白图像，使用 imagestring 函数在任何需要的地方放置文本，并使用 imagecopy 将产品图像复制到创建的图像中。

于 2009-10-20T22:25:44.573 回答
1

如果您可以将其限制为 Firefox 扩展，您可以查看一些用于创建页面屏幕抓取的扩展，例如http://www.screengrab.org/。

我曾经帮助过一个人，他想要和你几乎一样的东西，建立一个名为 uxrepublic.com 的网站（现已不存在）。我为他制作了一个原型（基于 ScreenGrab），您可以在其中创建整个页面的屏幕截图，或者选择页面的一部分然后将该屏幕截图上传到服务器。在通过查看 html 元素来找出屏幕截图的实际尺寸方面，它没有做您需要的事情，但是有能力的 Web 开发人员应该能够轻松地添加该功能。我做的原型仍然可以下载，原始消息线程提供了更多上下文，位于：

http://forums.mozillazine.org/viewtopic.php?t=587929

于 2009-10-20T22:06:18.543 回答
1

我会在服务器端而不是客户端对广告进行布局，并将其作为图像而不是 HTML 提供给用户。它提供了更多可能性，并且从中创建图像的步骤已经完成。

于 2009-10-20T21:57:28.370 回答
0

为什么不将包含广告的 div 复制到一个新的空白页面中，然后对该浏览器窗口进行屏幕截图。然后您可以轻松修剪浏览器窗口和空白屏幕。那行得通吗？

Photoshop 有一个“修剪”命令来删除所有的白色边框。因此，您可以轻松地从每一侧裁剪一定数量以删除浏览器窗口，然后修剪以删除白色。然后你只有广告。您确实有一个问题，如果广告的边缘有大量空白，那么它就会丢失。

另一种方法是在添加中添加一个 2px 洋红色（例如）边框，然后以编程方式删除边框之外的所有内容。

于 2009-10-20T21:30:02.857 回答