HTML将图像从画布复制到另一个画布

Question

我想从第一个画布生成一个图像，然后在另一个画布中绘制，但是我有一个问题，因为我不知道为什么我在另一个画布中什么都看不到。 这是我的代码：

<canvas id="gameCanvas" width="704" height="608" />
<script type='text/javascript'>
    // prepaire our game canvas
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");
        var ctx = document.createElement("canvas").getContext("2d");
        ctx.canvas.width = 2048;
        ctx.canvas.height = 2048;   

        var rows = 64;
        var columns = 64;
        this.image = new Image();
        var imageObject = document.createElement("img");
        var me = this;

        /// need this as loading is async
        imageObject.onload = function() {    
            for (var i = 0; i < rows; i++) {        
                for (var j=0; j <columns; j++) {  
                    ctx.drawImage(this, i*32,j*32,32,32); 
                }   
            }       
            // store the generate map as this image texture
            me.image.src = ctx.canvas.toDataURL("image/jpg");                 
        }

        imageObject.src='ground.jpg';
        this.image.src = ctx.canvas.toDataURL("image/jpg");     


        context.drawImage(this.image, 0, 0, 300, 300, 0, 0, 300,300);       
</script>

请寻求建议，为什么它不起作用？

Answer 1

创建DOM元素后，应将其附加在另一个元素上以显示它。

尝试这个

的jsfiddle

脚本：

var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        var image=document.createElement("img");
        image.onload=function(){ 
            canvas.width = image.width;
            canvas.height=image.height;
            ctx.drawImage(image,0,0); 
            var tcanvas = document.createElement('canvas');
            var tctx = tcanvas.getContext('2d');
            tcanvas.width = 8*image.width;
            tcanvas.height = 8*image.height;
            for(var i=0;i<8;i++){
                for(var j=0;j<8;j++){
                      tctx.drawImage(image, i*image.width,j*image.height); 
                    document.body.appendChild(tcanvas);
                }
            }
        }
   image.src="https://lh4.googleusercontent.com/-L1cr04d6ONc/RsRykgOl9zI/AAAAAAAABIE/WqBGOdiJnys/s128/Finishes.Flooring.Tile.Square.Blue.bump.jpg";

Answer 2

1. 通过将画布转换为DataURL，然后将图像源设置为该DataURL，您将不必要地走弯路。 这是不必要的，因为context.drawImage可以与<canvas> ，就像它可以与<img> 。 您可以将背景画布（画布本身，而不是上下文）用作源，就像可以使用图像一样。
2. 您似乎假设图像的onload-handler在设置src-attribute时即已执行。 不是这种情况。 从服务器加载图像时，您的JavaScript代码会继续。 您无法确定何时（以及是否）将实际执行加载处理程序。 但是您将this.image.src设置为画布的dataUrl，然后将该图像用于context.drawImage 。 届时，画布可能仍将是空白的，因此data-url也将是空白图像。

解决方案：将代码的最后一行放入onload-function中。