HTML5
dom
canvas

ChromeでもDOMをCanvasにレンダリングして画像を取得するには


背景

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);
}


関連記事