キャンバスに.jpgを取得し、長方形と文字列を追加したいのですが、これは非常にうまく機能しています。その後、キャンバスから jpg を作成したいのですが、これは正常に機能しますが、キャンバスの jpg には四角形と文字列しか表示されません。簡単なコード例 - 私はそれが醜いキャンバスであることを知っています - ただテストしています;)
<!DOCTYPE html>
<html>
<body>
<canvas id="meinCanvas" width="600" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
<script type="text/javascript">
var canv = document.getElementById("meinCanvas");
var context = canv.getContext("2d");
context.fillStyle = "#000000";
context.fillRect(10,10, 200, 100);
var img = new Image();
img.onload = function() {
context.drawImage(img, 300, 300);
};
img.src="one.jpg";
context.font = "bold 12px sans-serif";
context.fillText("test", 500, 500);
imgsr = canv.toDataURL("image/jpeg");
document.write('<img src="' +imgsr +'"/>');
</script>
</html>
}
上部 (キャンバス) では img が正しく表示されますが、その下の .jpeg では img が表示されません。助けは素晴らしいでしょう。ありがとう。