javascript で装飾を加えた描画内容を　PNG 出力する方法

問題点

<canvas> タグ内の画像を　PNG 出力する方法は分かるのですが
HTML 上で変更された DIV Box を　canvas に描かせて
その内容を先ほどと同様に　PNG 出力すると
うまく行きません。

正しい方法をご指導下さい。

参照したコード**

（１）　基本骨格に使用
http://www.pori2.net/html5/Canvas/150.html

（２）　HTML から SVG 作成の部分を借用
https://qiita.com/haribote/items/b17d46b9679ce2fb2712
一発芸！SVGでHTMLを画像化する

---**
うまく行く部分のコード**

コード

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">


</head>

<body>

<section class="">

	<canvas id="cv1" width="360" height="240">
	</canvas>

	
	<form>
		<input type="button" value="change color" onclick="chgCol()">
		<input type="button" value="convert image" onclick="chgImg()">
	</form>

	<div>
		<img id="newImg">
	</div>
</section>


<script>

	var cvs = document.getElementById("cv1");
	var ctx = cvs.getContext("2d");

//canvas .. draw random color stripes

	function chgCol()
	{
	  for ( var i = 0 ; i < 9 ; i++ )
	  {
		var r = Math.floor(Math.random()*256);
		var g = Math.floor(Math.random()*256);
		var b = Math.floor(Math.random()*256);

		ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
		ctx.fillRect( 40*i, 0, 40, 240 );
	  }
	}

//canvas data to other image format

	function chgImg()
	{
	  var pngData = cvs.toDataURL() ;
	  document.getElementById("newImg").src = pngData ;
	}
	
// ref:		http://www.pori2.net/html5/Canvas/150.html	
//
		//	toDataURL(imgage/png) 	= toDataURL()
		//	toDataURL(image/svg+xml) 
		//	toDataURL(image/jpeg) 

</script>

</body>
</html>

---**
合成したら動かないコード**


<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">

<script>

function changeColor() 
{
	document.getElementById("box01" ).style.backgroundColor = "orange" ;
}

</script>


</head>

<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 ;
}
.blue3 {	background-color: lightblue;
}
.wrap3 {	padding: 15px ;
}
  </style>
  
  <g>
    <foreignObject  width='100%' height='100%' >
	
      <div xmlns="http://www.w3.org/1999/xhtml">


		<section class="wrap3 ">
			<div id="box01" class="w00 h00 green0 " >
			</div>
			<div id="box02" class="w00 h00 blue3 " >
			</div>

		</section>


      </div>
	  
    </foreignObject>
  </g>
</svg>


  <br>
  <button class= " "  onclick= "changeColor() " > change color
  </button>



<section class="">

	
	<form>
		<input type="button" value="convert image" onclick="chgImg()">
	</form>

	<div>
		<img id="newImg">
	</div>
</section>



<footer>
<script>

	
//canvas data to other image format
	const canvasEl = document.getElementById('canvas');

	function chgImg()
	{	
		let pngData = canvasEl.toDataURL() ;
		
		document.getElementById("newImg").src = pngData ;
	}

</script>

</footer>

</body>
</html>

よろしくお願いいたします。

defghi1977

2018/03/08 01:28

> うまく行きません。どのようにうまく行かないのか詳細に記述してください.

yambejp

2018/03/08 01:37

うまくいく簡単なサンプルと、うまくいかない簡単なサンプルを提示下さい

m.ts10806

2018/03/08 02:10

参考にしたコードはあくまで参考であって今現在直面している問題のコードは全く別のものです。現在自身が組まれているコードが必須です。また「先ほど」というのは前の質問https://teratail.com/questions/116193 のことでしょうか？こちらは解決したのでしょうか？おそらくあちらの解決をもってこちらも解決しそうには思いますが・・・。質問のヒントもご一読ください。https://teratail.com/help/question-tips

m.ts10806

2018/03/08 02:53

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

行動規範の内容に同意します

回答1件

SVG/canvasを介したDOMのPNG画像化は実現するために多くの技術が要求されるうえ動作環境に制約が掛かりすぎるなど, 全くお手軽ではありません.
以下に必要となるテクニックを列挙します.

SVG画像はimg要素に読み込むことが出来る.
DOMの内容はXMLSelializerオブジェクトもしくはouterHTMLプロパティを使ってHTMLソース化できる.
HTMLコードはSVGのforeignObject要素を使ってSVGコードに埋め込むことが出来る.
SVGコードはencodeURIComponentメソッド, もしくはBlob+URL.createObjectURLを使ってimg要素が読み込み可能なURL文字列に変換できる.
img要素の内容はCanvasRenderingContext2D(コンテキスト)オブジェクトを介してcanvas要素に描画できる.
canvas要素の内容はtoDataURL/toBlobメソッドを使ってPNG画像化できる.