タイトルが私の問題への最善のアプローチを伝えているかどうかわからないので、少し後退させてください.
私の会社は、広告アフィリエイト プログラムを設定しています。まもなく多数の Web ページに表示されるウィジェットがあり、このウィジェットには、アフィリエイト小売業者からのさまざまな広告を表示する広告ブロックが含まれます。
さまざまな製品の何千もの広告をすばやく (そして可能な限り自動化して) 作成できるソリューションが必要です。残念ながら、当社の広告管理サービス (Google アド マネージャー) は画像ベースの広告クリエイティブのみを受け入れます (実際には Flash を受け入れますが、使用したくありません)。提案があれば、HTML 広告を受け入れる広告管理サービスも実行可能なソリューションになる可能性があります。
Web 開発の世界から来た私たちの最初のアイデアは、非技術者が広告のすべてのコンテンツ (製品名、希望小売価格、販売価格、製品レビューなど) を入力できるブラウザベースの UI を作成することでした。その寸法。この情報を使用して、アプリケーションは入力フォームの横にある「プレビュー」 <div> に広告をレイアウトし、ユーザーが広告のレイアウトとコンテンツを確認して更新できるようにします。次に、この HTML プレビューを使用して、テキストや製品画像のサイズなどを調整し、許容できる広告レイアウトに仕上げることができます。
それはすべて私たちにとって十分に達成可能に思えます。注意が必要なのは、ブラウザーで表示できる HTML プレビューを、かなり高品質の画像に変換する効率的でスケーラブルな方法を見つけ出すことです。各広告が完成したときにページのスクリーンショットを撮ることもできますが、それにはいくつかの追加手順が必要になります。スクリーンショットを画像エディタにコピーし、トリミングして保存し、サーバーにアップロードして、Google Ad Manager を画像の URL。これらの手順に何千もの広告を掛けると、必要以上にプロセスが煩雑になります。
したがって、私は最終的に方法を探しています - ブラウザプラグイン、ブックマークレット、Ruby、Java、または JavaScript などを使用してサーバー側またはクライアント側でこれを行う方法など -合理的に可能な限り少ない手順で、ブラウザー ウィンドウをサーバー上にある画像に変換します。
ただし、スクリーンショットを撮るには、HTML/CSS レンダリングの概念を理解して、広告の「画像」の端 (親 HTML 要素の寸法と位置など) がどこにあるかを知る必要があるようです。空白の白いページの背景に対して広告の四角形だけを切り取ることができます (魔法の杖ツールを使用した Photoshop アクションの線に沿って考えています)。
誰かに共有するアイデアや提案があれば、とても感謝しています!