{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/convert-any-html-element-to-image/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"84c18e00-9062-5876-b160-15acdabeda21","excerpt":"ソースコードを画像に変換できるCarbonという web アプリをご存知でしょうか。 ↑ のような画像が生成できるサービスです。フォントやテーマなどがとても素敵な画像が生成されるため、TL…","html":"

ソースコードを画像に変換できるCarbonという web アプリをご存知でしょうか。
\n↑ のような画像が生成できるサービスです。フォントやテーマなどがとても素敵な画像が生成されるため、TL でよく見るようになってきました。

\n

画像の生成をサーバサイドでやっているのかと持ったのですが、開発者ツールでデバッグしてみても、画像 export 時に通信は発生していません。フォントを fetch してくるだけで、それ以外はブラウザ内部で生成されているようです。

\n

このような画像を生成できる仕組みを調べて実証してみました。

\n\n

作ったもの

\n

こちらになります。
\n※OffscreenCanvas という API を使用しているため、おそらく Chrome でしか動作しません (ブラウザ互換)

\n
\n

— Example of rendering HTML element into canvas

\n
\n

動作しない環境のためにスクショも載せておきます。
\ntextarea と最終成果物の PNG 画像、中間データである SVG をデモ用に表示、highlight.js でシンタックスハイライト済みの HTML を最下部に表示しています。

\n

\n \n \n \n \n \n \n

\n

PNG の画質が荒かったりスタイルが洗練されていなかったり、生成される画像のクオリティでは Carbon に到底及びませんが、HTML の要素を画像に変換する PoC としては十分伝わると思います。

\n

ソースコードはこちらです。

\n
\n

— Generate image of syntax highlighted code from highlight.js - CodeSandbox

\n
\n

仕組み

\n

シンタックスハイライトを画像化してみた。SVGのforeignObjectにstyleとハイライト後のHTMLを突っ込んでBlobに変換、blob://のままだとtaintedになりCanvasがPNG出力できないのでFileReaderでdata://に変換した<img />をdrawImageしてconvertToBlobすれば、ブラウザだけでHTMLをPNGまで変換できる。 pic.twitter.com/HAgziJhZmN

— れこ | 6/18 TS meetup #1 (@L_e_k_o) May 14, 2019
\n\n

一言に詰め込むとこんな作りになっています。
\n１つ１つの要素について説明していきます。

\n

シンタックスハイライトして HTML を作る

\n

これはただの HTML+JS の操作です。
\nhighlight.jsのドキュメントの通りにシンタックスハイライトを実行します。

\n
import hljs from 'highlight.js/lib/highlight'\nimport typescript from 'highlight.js/lib/languages/typescript'\n\n// ハイライトしたい言語を登録しておく\nhljs.registerLanguage('typescript', typescript)\n\nconst el = document.querySelector('#code code')\nel.textContent = 'コード'\nhljs.highlightBlock(el)
\n

単にハイライト済みの HTML 文字列を得たい場合はhighlightAutoというメソッドが利用できますが、その場合得られた要素のサイズ（幅、高さ）を自前で計算する必要があります。

\n
const code: string = 'コード'\nconst html: string = hljs.highlightAuto(code).value
\n

抽象的に捉えるなら、要は HTML 形式の文字列と画像のサイズが手に入れば OK という話です。

\n

HTML を SVG に変換する

\n
\n

— <foreignObject> - SVG: Scalable Vector Graphics | MDN

\n
\n

SVG の中で使える foreignObject という要素があります。この中には (X)HTML が書けます。
\nミニマムだとこのような SVG を文字列で生成することになります

\n
const parentEl = document.querySelector('#code')\nconst codeEl = document.querySelector('code')\nconst w = codeEl.clientWidth\nconst h = codeEl.clientHeight\nconst svg = `\n<svg\n  width=\"${w}px\"\n  height=\"${h}px\"\n  viewBox=\"0 0 ${w} ${h}\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <foreignObject width=\"100\" height=\"50\">\n    ${parentEl.outerHTML}\n  </foreignObject>\n</svg>\n`
\n

ただし、この SVG を画像として表示させようとしても表示されないと思います。
\nforeignObject の中にはXHTML を記述しないといけないためXMLSerializerを使用して XML のシリアライズします。
\nXMLSerializer には string ではなく Node(HTMLElement)を渡す必要があります。

\n
const serializer = new XMLSerializer()\nconst svg = `\n<svg ...>\n  <foreignObject ...>\n    ${serializer.serializeToString(parentEl)}\n  </foreignObject>\n</svg>\n`
\n

これで SVG 画像は描画できるようになったと思います。

\n

SVG に style をつける

\n

このままだとスタイルの当たってないただの HTML なので、スタイルを当てます。
\nforeignObject にはインライン CSS が書けます。

\n

例えば highlight.js のテーマ（CSS）を適用するならこんな感じにインライン化できます。\nXMLSerializer には string ではなく Node(HTMLElement)を渡す必要があるため、style タグを生成してシリアライズしています

\n
const loadTheme = name => {\n  return fetch(`https://unpkg.com/highlight.js@9.15.6/styles/${name}.css`).then(\n    res => res.text()\n  )\n}\n\nconst css = await loadTheme('dracula')\nconst style = document.createElement('style')\nstyle.textContent = css\n\nconst svg = `\n<svg ...>\n  <foreignObject ...>\n    <div xmlns=\"http://www.w3.org/1999/xhtml\">\n      <style>\n        // 独自スタイルもインラインで書ける\n      </style>\n      <style>${serializer.serializeToString(css)}</style>\n      ${serializer.serializeToString(parentEl)}\n    </div>\n  </foreignObject>\n</svg>\n`
\n

SVG でもよければ、ここまでで終わります。
\nベクター画像なのでとても綺麗な反面、SVG は OGP の画像として使えなかったりと汎用性が高くないので、PNG 画像への変換に続きます。

\n

Canvas に SVG を描画する

\n

SVG から PNG を得るために Canvas を使用します。

\n

Canvas に画像を render するにはdrawImageを使用します。ただし SVG の文字列をそのままは render できないので、作った SVG 文字列をdata:の URL に変換し、 img タグに読み込ませ drawImage に与えます。

\n

DOM 依存の Canvas を使う必要はなく、オンメモリ上で計算ができる OffscreenCanvas を利用しています。

\n
// `blob:`のままだとCanvasのCORS制限にひっかかってPNG出力できないので、`data:`に変換する\nconst blobToDataUri = (blobUri): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    var reader = new FileReader()\n    reader.addEventListener('error', reject)\n    reader.addEventListener('load', () => {\n      resolve(reader.result)\n    })\n    reader.readAsDataURL(blobUri)\n  })\n}\n\nconst svgToDataUri = (svgStr: string): Promise<string> => {\n  const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' })\n  return blobToDataUri(blob)\n}\n\nconst dataUri = await svgToDataUri(svg)\nconst img = new Image()\nimg.src = dataUri\nimg.addEventListener('load', () => {\n  const canvas = new OffscreenCanvas(w, h)\n  const ctx = canvas.getContext('2d')\n  ctx.drawImage(img, 0, 0)\n  const pngBlob = canvas.convertToBlob()\n  const pngObjectUri = URL.createObjectURL(blob)\n})
\n

pngObjectUriを img タグで表示すると、PNG 画像が表示されます。
\n画面に表示するのではなくファイルとして手に入れたい場合は、a タグをメモリに生成すればファイルダウンロードも可能です。

\n
\n

— a タグの download 属性でサーバを介さずにファイルダウンロードする | WEB EGG

\n
\n

これらすべてを含んだ最終的なソースコードはこちら（再掲）です。

\n
\n

— Generate image of syntax highlighted code from highlight.js - CodeSandbox

\n
\n

以上の手順で HTML 要素を PNG まで変換できます。

\n

WebWorker でも動くのか？

\n

おそらく無理だと思います。少なくともこの記事を書いた時点では実現できませんでした。
\n処理の中でnew Image()して SVG 画像をレンダリングした結果を canvas に渡しているのですが、Imageは WebWorker には存在しない API なので、SVG を簡単にレンダリングする手段がありません。

\n

応用範囲は広い

\n

本記事では仕組みの説明のためにシンタックスハイライトを題材に書きましたが、もっと抽象的な用途に応用できそうです。
\n要は HTML+インライン CSS を画像化できるので、例えば画面全体のスクリーンショットを撮れるはずです。

\n

画面内のlink[rel=\"stylesheet\"]をかき集めてインライン化し、<style>タグをあわせて foreignObject の中に入れて、document.bodyを XMLSerializer に入れたらどうなるか試した結果、ある程度うまく行きました。

\n

動作デモはこちらです。
\nある程度複雑な UI を実現するためにMUI という CSS フレームワークのチュートリアルを撮影対象にしました（数年ぶりに jQuery 書いた）

\n
\n

— Capture screen & Download as PNG

\n
\n

実際に生成される画像はこちらです。

\n

\n \n \n \n \n \n \n

\n

惜しい感じになりました。なぜかサイドバーが消えています…

\n

（WebWorker で動かないのでやや厳しいですが）ドラレコの要領で裏側で画面を撮影をしておきサーバに送れれば、ユーザの操作がリアルに見えて、ユーザテスト、アクセス解析、エラートラッキング etc に役立たちそうと思いました。マウスカーソルの座標を保持しておき、カーソルっぽい画像を Canvas に書き加えてから画像化すればマウスカーソル（を模したもの）を画像に写すこともできますし。

\n

やり方によっては悪用できそうなので、悪用はしないようお願いいたします。

","timeToRead":9,"frontmatter":{"title":"シンタックスハイライト済みのソースコードの画像をブラウザだけで作成したい","tags":["JavaScript","Canvas"],"date":"May 28, 2019","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='180'%20viewBox='0%200%20400%20180'%20preserveAspectRatio='none'%3e%3cpath%20d='M29%2029l-1%2062%201%2060h343V91l-1-62c-2-2-340-2-342%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.2266666666666666,"src":"/static/7ef5022542047c39e79f4e940ff571eb/8eab8/featured-image.png","srcSet":"/static/7ef5022542047c39e79f4e940ff571eb/1ec58/featured-image.png 334w,\n/static/7ef5022542047c39e79f4e940ff571eb/ccb4a/featured-image.png 668w,\n/static/7ef5022542047c39e79f4e940ff571eb/8eab8/featured-image.png 1336w,\n/static/7ef5022542047c39e79f4e940ff571eb/85e22/featured-image.png 2004w,\n/static/7ef5022542047c39e79f4e940ff571eb/a9ec1/featured-image.png 2672w,\n/static/7ef5022542047c39e79f4e940ff571eb/d1d3a/featured-image.png 3168w","srcWebp":"/static/7ef5022542047c39e79f4e940ff571eb/f7e47/featured-image.webp","srcSetWebp":"/static/7ef5022542047c39e79f4e940ff571eb/cd98f/featured-image.webp 334w,\n/static/7ef5022542047c39e79f4e940ff571eb/7535d/featured-image.webp 668w,\n/static/7ef5022542047c39e79f4e940ff571eb/f7e47/featured-image.webp 1336w,\n/static/7ef5022542047c39e79f4e940ff571eb/f6b67/featured-image.webp 2004w,\n/static/7ef5022542047c39e79f4e940ff571eb/f71bf/featured-image.webp 2672w,\n/static/7ef5022542047c39e79f4e940ff571eb/c44a1/featured-image.webp 3168w","sizes":"(max-width: 1336px) 100vw, 1336px"}}}}}},"pageContext":{"slug":"/convert-any-html-element-to-image/","previous":{"fields":{"slug":"/dynamic-import-tips-for-gatsby/"},"frontmatter":{"title":"GatsbyでReactコンポーネントをDynamic importしてCode Splitするwork around","tags":["JavaScript","Gatsby","React"]}},"next":{"fields":{"slug":"/jsconfeu2019/"},"frontmatter":{"title":"JSConf EU 2019に行ってきました","tags":["JavaScript","JSConf","Community"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}