<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
セキュリティ上の理由から簡単ではありませんが、HTML など DOM の内容を canvas に描画することができます。この記事は Robert O'Callahan によるブログ記事をもとに、セキュアに、安全に、そして仕様に準拠したかたちでそれを実現する方法を紹介します。 概要 HTML をそのまま canvas に描画することはできません。その代わりに、描画したい内容を含む SVG 画像を利用します。描画したい HTML を含む <foreignObject> を作り、その SVG 画像を canvas に描画するのです。 描画へのステップ 唯一厄介なのが、SVG を作ることです。SVG のための XML を含んだ文字列を作り、次のものを含んだ Blob を生成することです。 "image/svg+xml" という Blob の MIME タイプ <svg> 要素 svg 要素内の <
こんにちは、中川です。 先月無事に結婚をした開発者が一名おり、近年アシアルでは徐々に既婚者が増えてきている状況です。 ということで、結婚といえば共同作業ですよね。 今までは、一人で作業していて大変なことが色々あったと思いますが、 二人（複数）でやれば、乗り越えられることもあることでしょう。 Webアプリでも最近は、より共同作業がしやすい環境ができつつあるように思います。 そこで、今回はWebSocketを使ったリアルタイム通信でのやり取りを行い、 一緒にお絵描きができるサンプルアプリを作ってみました。 ■■■概要■■■ ・アプリ概要 ・・Canvas + WebSocket ・対応ブラウザ ・・Chrome or Safari (他、WebSocketが使えるブラウザ） ・サーバ側プログラム ・・node.js 0.2.0 ・・express@1.0.0rc2 ・・websocket-se
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
