0

我在将一个画布显示到另一个画布时遇到问题。我按照 这个解决方案做所有事情

<script>
    var source = document.getElementById('hiddenCanvas');
    var source_ctx = source.getContext('2d');
    var img = new Image();
    img.onload = function(){
       source.width = img.width;
       source.height = img.height;
       source_ctx.drawImage(img, 0, 0, img.width, img.height);
       }
    img.src = 'icon.jpg';
    var destination = document.getElementById('visibleCanvas');
    var destin_ctx = destination.getContext('2d');
    destin_ctx.drawImage(source, 0, 0);
</script>

好吧，第一个画布元素正确显示图片，但无论我做什么，第二个画布都不想显示图片。

4

3 回答 3

0

您正在尝试在加载图像之前从源中绘制图像，并且源甚至具有图像。

在处理程序内移动最后一个绘制操作onload。还要记住设置目标画布的大小：

var source = document.getElementById('hiddenCanvas');
var source_ctx = source.getContext('2d');

var destination = document.getElementById('visibleCanvas');
var destin_ctx = destination.getContext('2d');

var img = new Image();
img.onload = function(){
    source.width = img.width;
    source.height = img.height;
    source_ctx.drawImage(img, 0, 0, img.width, img.height);

    destination.width = source.width;
    destination.height = source.height;
    destin_ctx.drawImage(source, 0, 0);
}
img.src = 'icon.jpg';
于 2013-07-26T03:10:21.073 回答
0 
<script>
function init()
{
    var source = document.getElementById('hiddenCanvas');
    var source_ctx = source.getContext('2d');

    var destination = document.getElementById('visibleCanvas');
    var destin_ctx = destination.getContext('2d');

    var img = new Image();
    img.onload = function(){
        source.width = img.width;
        source.height = img.height;
        source_ctx.drawImage(img, 0, 0, img.width, img.height);

        destin_ctx.drawImage(source, 0, 0);
    }
    img.src = 'arun.jpg';
}
</script>
</head>
<body onload="init();">
<canvas id="hiddenCanvas" />
<canvas id="visibleCanvas" />

您的代码不起作用，因为您试图在将 canvas 元素加载到 dom 之前访问它

于 2013-07-26T03:22:03.810 回答
0

您当前构建代码的方式是 img.onload在 destin_ctx.drawImage 行之后执行。这意味着您的程序流程当前看起来像这样：

  1. 图像被告知开始加载
  2. 使用（当前为空白）源画布绘制目标画布
  3. 图片加载完毕
  4. 图像的 onload 执行，导致源画布被绘制到。目标画布未更新，因为 destin_ctx.drawImage 操作是一次性副本。

您需要做的是将 destin_ctw.drawImage 调用移动到执行流程中您知道源画布肯定包含适当内容的位置。在这种简单的情况下，将其移动到图像的 onload 内部就可以了。

这是在 Chromium 中为我工作的完整（但简化的）HTML 文件，带有更改的图像 url：

    <脚本>
    函数加载（）{
        var source = document.getElementById('hiddenCanvas');
        var source_ctx = source.getContext('2d');
        var 目的地 = document.getElementById('visibleCanvas');
        var destin_ctx = destination.getContext('2d');
        var img = new Image();
        img.onload = 函数（）{
           source.width = img.width;
           source.height = img.height;
           source_ctx.drawImage(img, 0, 0, img.width, img.height);
           destin_ctx.drawImage(source, 0, 0);
        }
        img.src = 'ship360_32.png';
    }
    </脚本>

    <body onload="load()">
    <canvas id="hiddenCanvas"></canvas>
    <canvas id="visibleCanvas"></canvas>
    </正文>
于 2013-07-26T03:26:36.443 回答