web-dev-qa-db-ja.com

canvas.toDataURLは黒一色の画像になりますか？

私はそれの中にいくらかの落書きがあるcanvas要素を持っています。

以下を使用してキャンバスをjpegに変換しています。

var data = canvas.toDataURL( "image/jpeg", 0.5 );
var img = new Image();
img.src = data;
$( "body" ).append( img );

ただし、落書きの代わりに、黒いjpegが表示されます。

誰かが私が間違っていることを教えてもらえますか？

ありがとう！

javascriptjquerycanvashtml5-canvas
15
user1031947

"image/jpeg"タイプで作成された画像のデフォルトの背景色は黒です。以下のスニペットを考えてみましょう。キャンバスは左側にあり、キャプチャされた画像は右側にあります。

var canvas = $("#c").get(0), ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(40,60,20,20);

var data = canvas.toDataURL("image/jpeg");
var img = new Image();
img.src = data;
$( "body" ).append( img );

var data = canvas.toDataURL("image/png");
var img = new Image();
img.src = data;
$( "body" ).append( img );
canvas { border: thin solid green; }
img { border: thin solid black; margin-right: 5px; }
body { background-color: #DFF; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c" width="100"></canvas>

キャンバスに黒の図形のみを描画した場合、それらはデフォルトの黒のJPEG背景に表示されません。

タイプimage/pngを代わりに使用すると、デフォルトで背景が透明になります。

12
apsillers