🖼️ 【HTML】SVGタグの中にimgを埋め込むための技術調査メモ
作成日: 2021/03/28
1

各チケットのOGP画像を生成できるようにしたい

以下の記事を参照
https://developer.mozilla.org/ja/docs/Web/SVG/Element/image
https://qiita.com/j8takagi/items/96fe243b99d95f04ff24

  • vuetifyのimgタグを使う実装方法は別途検討する
  • とりあえず生のHTMLで表示させる

SVGファイルで、image要素を使って外部の画像ファイルを参照すると、問題が発生する場合がある。
=> その対策として、画像ファイルをbase64コードに変換したデータに置換します


この記事が良い
https://www.memory-lovers.blog/entry/2020/01/24/110000

うまくいかないので、

  • html2canvasを使う

参考記事:https://qiita.com/you8/items/0c0ee2f5f25b9e2d482a
https://html2canvas.hertzen.com/

https://blog.proglearn.com/2021/02/05/html2canvasを使ってhtmlサイトを画像化!/

engineer/JavaScript/TypeScript/Vue/Nuxt🦒