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中。