如何从一组画布中显示图像？答案

【问题标题】：How does one display an image from a collection of canvas?如何从一组画布中显示图像？
【发布时间】：2016-07-28 15:11:26
【问题描述】：

开始

x = document.getElementsByTagName('CANVAS');

x[n] 的返回值是 [object HTMLCanvasElement]。

Display Content of a List Item

显示列表项的内容可以使用 innerHTML 完成，但我一直无法找到显示画布项内容的示例。

如何访问 x[n] 的内容以显示画布？

【问题讨论】：

如果我正确理解了这个问题，您正试图在画布上绘制图像。但是请注意，HTML 中的画布元素由脚本填充，而不是 <canvas></canvas> 标记之间的内容。我的方法是从数组中获取 canvas 元素，将其附加到文档中的某个位置。然后为了检索画布的内容，您运行脚本。这就是你想要做的吗？
@AgataB，你是对的。这就是我想要做的。我相信集合的行为 - 或行为不端 - 与数组不同。我对 Image & dataURL 有一定的了解，但画布的呈现方式不同。您正朝着正确的方向引导我，通知画布元素由脚本填充。但是，如何访问脚本？
脚本通常在<script> ... </script> 标签内，但此时将画布存储为图像数据可能更容易/更快/更简单？ w3schools.com/tags/canvas_getimagedata.asp 这取决于您从哪里获取数组。 <script> ... </script> 可能包含一堆不相关的其他内容。
您可以使用getImageData() 获取图像数据并将其设置在另一个画布元素上。或者，您可以在 canvas 元素上使用 toDataURL() 将数据作为数据 URL 获取。然后，您可以将其用作 Image 元素的 src，或在另一个窗口中打开它，等等。
ManoDestra，由于我在下面向@markE 解释的原因，toDataURL() 不起作用。我还没有尝试过 getImageData()，但它可能会起作用，因为该命令正在获取已经存在的数据。

标签： javascript canvas collections

【解决方案1】：

这是一个示例 HTML 文件，显示了输出相关数据的各种不同方法。我已经展示了如何从隐藏的画布中获取数据，但您可以轻松地从实例化的画布元素或它们的数组中获取数据。我已经展示了如何将画布数据复制到另一个画布、图像、新窗口/选项卡和控制台：

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas Test</title>
        <meta charset="UTF-8">
        <script>
            var canvas;
            var canvasHidden;
            var img;
            var ctxHidden;
            var ctx;

            function init() {
                console.log('init');
                canvasHidden = document.getElementById('canvasHidden');
                canvas = document.getElementById('canvas');
                img = document.getElementById('img');
                ctxHidden = canvasHidden.getContext('2d');
                var imgToLoad = new Image();
                imgToLoad.onload = function(event) {
                    ctxHidden.drawImage(event.target, 0, 0, canvasHidden.width, canvasHidden.height);
                };
                imgToLoad.src = "Example.jpg";

                canvas.width = canvasHidden.width;
                canvas.height = canvasHidden.height;
                ctx = canvas.getContext('2d');
            }

            function toCanvas() {
                ctx.putImageData(ctxHidden.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height), 0, 0);
            }

            function toImage() {
                img.src = canvasHidden.toDataURL();
            }

            function toTab() {
                window.open(canvasHidden.toDataURL());
            }

            // Warning: this can take quite some time depending on the size of your image.
            // You may wish to only show limited pixel data, depending on your needs.
            function toConsole() {
                // Show all data on the console...
                var data1 = ctxHidden.getImageData(0, 0, canvasHidden.width, canvasHidden.height).data;
                console.log(data1);

                // Or just a single pixel (can easily be amended to display a small range of pixels instead)...
                var x = 32;
                var y = 25;
                var data2 = ctxHidden.getImageData(x, y, 1, 1).data;
                for (var i = 0; i < data2.length; i += 4) {
                    console.log('Pixel data at [' + x + ', ' + y + ']:', data2[i], data2[i + 1], data2[i + 2], data2[i + 3]);
                }
            }

            window.onload = init;
        </script>
    </head>
    <body>
        <canvas id="canvasHidden" style="display:none;"></canvas>
        <canvas id="canvas"></canvas>
        <img id="img" src="" alt="Will receive image data">
        <br>
        <button onclick="toCanvas();">To Canvas</button>
        <button onclick="toImage();">To Image</button>
        <button onclick="toTab();">To Tab</button>
        <button onclick="toConsole();">To Console</button>
    </body>
</html>

这里有关于 getImageData 的信息：http://www.w3schools.com/tags/canvas_getimagedata.asp

关于 toDataURL 的信息在这里：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

【讨论】：