play-yamaguchi https://blog.hatena.ne.jp/play-yamaguchi/ PLAY DEVELOPERS BLOG https://developers.play.jp/ フロントエンド 24卒で新卒入社いたしました。メディアサプライチェーン技術部開発第１グループの山口です。 私は業務の中で、動画に任意のテキストをテロップとして重ねられる機能を実装しました。 その際、テロップ画像をサーバーサイドで生成すると、ブラウザでプレビューを表示するまでに若干の遅延が発生する点や、サーバーの稼働コストがかかる点を考慮し、今回は、HTML 要素を画像化するという方法でブラウザ上でテロップの画像データを作成しました。 本記事では、この方法についてご紹介いたします。 HTML要素のテロップを画像化 1. SVG形式の画像を作成 2. SVG形式の画像をPNG形式の画像に変換 実際に動かしてみた … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdevelopers.play.jp%2Fentry%2F2025%2F03%2F17%2F124629" title="ブラウザ上で HTML 要素を画像化してテロップ画像を作る - PLAY DEVELOPERS BLOG" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/p/playjp/20250317/20250317115159.jpg Hatena Blog https://hatena.blog 2025-03-17 12:46:29 rich https://developers.play.jp/entry/2025/03/17/124629 1.0 100%