javascript-是否可以自动拍摄一部分网页的屏幕截图(例如,用CSS选择器或HTML父元素表示)？

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

我公司正在建立一个广告联盟计划.我们有一个窗口小部件,该窗口小部件很快就会显示在许多网页上,并且该窗口小部件将包含一个广告块,其中将显示来自我们的会员零售商的各种广告.

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

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

对于我们来说,这一切似乎都是可以实现的.棘手的部分是找出一种有效且可扩展的方法,以将我们在浏览器中可以看到的HTML预览转换为相当高质量的图像.我们可以在每个广告完成后为页面截图,但这将涉及几个额外的步骤-将截图复制到图片编辑器中,裁剪,保存并上传到我们的服务器,以便我们将Google广告管理系统指向图片的网址.将这些步骤与成千上万的广告相乘,将使该过程变得比我们认为的要麻烦.

因此,我最终正在寻找一种方法-可以是浏览器插件,书签,使用Ruby,Java或JavaScript在服务器端或客户端执行此操作的方法等-来改变我们在浏览器窗口中的图像就可以在合理的范围内以最少的步骤出现在我们服务器上.

无论如何,似乎采取任何截图操作都必须理解HTML / CSS渲染的概念,以了解广告“图像”的末端在哪里(例如其父HTML元素的尺寸和位置),或者能够仅在空白的白纸背景下裁剪出广告方块(我正在考虑使用魔术棒工具在Photoshop Action的基础上进行裁剪).

如果有人有任何想法或建议要分享,我将不胜感激！

解决方法:

您可以使用服务器端语言来创建图像,而不是创建HTML预览,它也可以作为预览图像使用吗？例如,使用PHP的GD and Image Functions,您可以拥有一个接受GET参数的服务器端脚本,例如：

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

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

标签：photoshop,screenshot,automation,advertising,javascript
来源： https://codeday.me/bug/20191107/2002594.html