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

HTML copy image from canvas to another canvas

本文关键字：复制 另一个 布复制 图像 HTML      更新时间：2023-09-26

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

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

请咨询为什么它不起作用？

创建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";
  1. 将画布转换为DataURL，然后将图像的源设置为该DataURL，这是在走不必要的弯路。这是不必要的，因为context.drawImage可以与<canvas>一起工作，就像它可以与<img>一起工作一样。您可以使用背景画布（画布本身，而不是上下文）作为源，就像使用图像一样
  2. 您似乎认为图像的onload处理程序是在您设置src属性的那一刻执行的。事实并非如此。从服务器加载图像时，您的javascript代码将继续。您无法判断负载处理程序将在何时（以及是否）实际执行。但是您将this.image.src设置为画布的dataUrl，然后将该图像用于context.drawImage。到那时，画布可能仍然是空的，因此数据url也将是空图像的url

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

相关文章：