質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

234閲覧

Canvas 上の SVG 画像を PNG画像に変換して同時表示させるには

xmg

総合スコア20

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/03/05 09:25

前提・実現したいこと

Canvas 上の SVG 画像を そのまま PNG画像に変化して

最初の SVG 画像のとなりに表示させようと調べていますが

うまく作動しません。

どのように直せば、SVG と PNG画像を、両方とも同時に画面上に出せるか

よろしくご指導ください。

発生している問題

作動せず

該当のソースコード

<!DOCTYPE html> <html> <head> <script> function changeColor() { document.getElementById("box01" ).style.backgroundColor = "orange" ; } </script> </head> </html> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 380" width="460" height="380"> <style> .w00 { width: 100px; } .h00 { height: 50px; } .green0 { background-color: green ; } </style> <g> <foreignObject width='100%' height='100%' >
<div xmlns="http://www.w3.org/1999/xhtml"> <div id="box01" class="w00 h00 green0 " > </div> </div> </foreignObject>
</g> </svg> <br> <button class= " " onclick= "changeColor() " > change color </button>

<br><br>

<button class= " " onclick= "ToPNG() " > SVG to PNG
</button>

<div id="png-container"> </div> </body> <footer> <script> // js-1: html to SVG

// read SVG
const canvasEl = document.getElementById('canvas');
const context = canvasEl.getContext('2d');
const imageEl = new Image();

// SVG to Blob to URL
const staticSvgBlob
= new Blob(['<svg xmlns...'], { type: 'image/svg+xml' });

const url = URL.createObjectURL(staticSvgBlob);

// SVG to canvas
imageEl.onload = () =>
{
context.clearRect(0, 0, canvasEl.width, canvasEl.height);
context.drawImage(imageEl, 0, 0);
URL.revokeObjectURL(url); // URL to release
};

imageEl.crossOrigin = 'Anonymous'; imageEl.src = url;
</script> <script> // js-2: SVG to PNG function ToPNG() { var svgString = new XMLSerializer().serializeToString( document.querySelector('svg')); var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var DOMURL = self.URL || self.webkitURL || self; var img = new Image(); var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); var url = DOMURL.createObjectURL(svg); img.onload = function() { ctx.drawImage(img, 0, 0); var png = canvas.toDataURL("image/png"); document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>' ; DOMURL.revokeObjectURL( png ); }; img.src = url; } </script> </footer> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/05 09:39

コードの中身を理解なさっていますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問