🖼️
【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🦒