javascript 将画布绘制到另一个画布中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11450178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw a canvas into another canvas not working
提问by MJQ
I am trying to draw a canvas created through javascript on another canvas. But it is not working for me,
我正在尝试在另一个画布上绘制通过 javascript 创建的画布。但它对我不起作用，
Here is my code,
这是我的代码，
<!DOCTYPE HTML>
<html>
<head>
</script>
<script>
window.onload = function(){
var can1 = document.createElement('canvas');
can1.width = 150;
can1.height = 140;
can1.style.cssText = 'top:2px;left:2px;border:2px solid black;';
var ctx1 = can1.getContext('2d');
var img=new Image();
img.src="images/211.jpg"
ctx1.drawImage(img,0,0);
var can = document.getElementById("c");
var ctx = can.getContext('2d');
ctx.drawImage(can1,0,0);
var canvas = document.getElementById("c");
window.open(canvas.toDataURL());
}
</script>
</head>
<body >
<canvas id="c" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
</body>
</html>
回答by Manish Mishra
I think the problem was that, when you were trying to drawImage that image into the canvas, image was not ready. so if u do this it works perfectly:
我认为问题在于，当您尝试将该图像绘制到画布中时，图像尚未准备好。所以如果你这样做，它就可以完美地工作：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var imageObj = new Image();
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
var dynamicCanvas = document.createElement("canvas");
var dynamicContext = dynamicCanvas.getContext("2d");
dynamicCanvas .height="400";
dynamicCanvas.width="578";
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
imageObj.onload = function() {
dynamicContext.drawImage(imageObj, 69, 50);
context=context.drawImage(dynamicCanvas,69,50);
window.open(canvas.toDataURL());
};
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
and you can adjust the height and width of the dynamic canvas.
并且您可以调整动态画布的高度和宽度。
if you remove that window.open statement, its perfect.
如果你删除那个 window.open 语句，它就完美了。
but there is a problem with canvas.toDataURL()
但有一个问题 canvas.toDataURL()
when you try to do canvas.toDataURL()for a local file, it gives a security error (if you inspect it through google chrome) i.e.
当您尝试对canvas.toDataURL()本地文件执行操作时，会出现安全错误（如果您通过 google chrome 进行检查），即
Uncaught Error: SECURITY_ERR: DOM Exception 18
you can know more about this error : here(see if you are getting this error). anyways, the root cause is sorted out, and there's a new problem now altogether :D..anyways better luck!!
您可以了解有关此错误的更多信息：此处（查看您是否收到此错误）。无论如何，根本原因已经解决了，现在又出现了一个新问题：D ..无论如何，祝你好运！！
回答by kaigorodov
The problem with an incorrect image display using the original code of MJQ is that he doesn't stated the size of the second canvas directly through attributes - only through style. Thus browser created a canvas of default size (300x150 for FF) and then stretched it to 250x350.
使用 MJQ 的原始代码显示不正确的图像的问题在于，他没有直接通过属性来说明第二个画布的大小 - 仅通过样式。因此浏览器创建了一个默认大小的画布（FF 为 300x150），然后将其拉伸到 250x350。
So the following modification will solve the image display:
所以下面的修改将解决图像显示：
<canvas id="c" width="250" height="350" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
Maybe this will help someone in the future.
也许这会对将来的某人有所帮助。
回答by Manish Mishra
what are you taking about? your code is working.
你在做什么？您的代码正在运行。
(If am getting your question correctly) I added following lines after
（如果我正确回答了您的问题）我在后面添加了以下几行
can1.style.cssText='border:2px solid black;';
:
：
var ctx1 = can1.getContext('2d');
ctx1.rect(50, 50, 500, 500);
ctx1.fillStyle = '#8ED6FF';
ctx1.fill();
and upon execution, i see a beautiful rectangle inside!! are you using html5 supporting browser??
执行后，我看到里面有一个漂亮的矩形！！你用的是支持html5的浏览器吗？？
