背景
Firefoxだと
DOM オブジェクトを Canvas に描画する - HTML | MDN
の方法が使える、
しかし！
2018年4月時点のGoogleのChromeやChromiumだとこの方法やると、
作成したCanvasがOrigin clean出ない為、難しいエラーがでる。
(このMDNのページにはWebKitのバグの為との記述があるけどどうなんだろ)
たとえば、この方法でつくったCanvasをThree.jsのテクスチャとして使おうとすると
Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.
と怒られてしまう。
解決方法
Blobの代わりにURLで指定すれば解決した。
const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg_data);
See the Pen wjgomG by Junichi Kajiwara (@kjunichi) on CodePen.
なんでわかったのか
ここのサンプルがChromeでもうごいたので、Githubのリポジトリを
眺めていたら、
rasterizeHTML.js/src/svg2image.js
に
if (useBlobs) {
return URL.createObjectURL(new Blob([svg], {"type": "image/svg+xml"}));
} else {
return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
}