HTML將圖像從畫布複製到另一個畫布

我想從第一個畫布生成圖像，然後在另一個畫布中繪製，但是我遇到了問題，因爲我不知道爲什麼我沒有看到其他任何內容帆布。這是我的代碼：HTML將圖像從畫布複製到另一個畫布

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

請諮詢爲什麼它不起作用？

來源

2013-11-21 user3015215

通過將畫布轉換爲DataURL，然後將圖像的源設置爲該DataURL，您正在進行不必要的繞行。這是不必要的，因爲context.drawImage可以與<canvas>一起使用，就像它可以使用<img>一樣。您可以使用背景畫布（畫布本身，而不是上下文）作爲源，就像您可以使用圖像一樣。
您似乎認爲圖像的onload處理程序在您設置src屬性時執行。不是這種情況。從服務器加載圖像時，您的JavaScript代碼會繼續。您無法確定何時（以及如果）裝載處理程序將實際執行。但是您將this.image.src設置爲畫布的dataUrl，然後將該圖像用於context.drawImage。在那一點上，畫布可能仍然是空的，所以數據網址也將是一個空的圖像。

解決方案：將代碼的最後一行放入onload函數中。

來源

2013-11-21 21:29:05 Philipp

創建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";

來源

2013-11-21 22:00:17

HTML將圖像從畫布複製到另一個畫布

回答

相關問題