Question

我想在画布上获得一个.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未显示。帮助会很棒。感谢。

Answer 1

保存图像时尚未加载。

将toDataUrl放入img.onload或将其链接到事件或计时器

画布与jpeg的图像

1 个答案: