Fatal编程技术网
  • javascript/
  • Javascript 如何显示画布集合中的图像？

Javascript 如何显示画布集合中的图像？

javascript canvas collections

Javascript 如何显示画布集合中的图像？,javascript,canvas,collections,Javascript,Canvas,Collections,从 x = document.getElementsByTagName('CANVAS'); x[n]的返回值为[object HtmlCanvaElement] 显示列表项的内容可以使用innerHTML完成，但我找不到显示画布项内容的示例 如何访问x[n]的内容以显示画布？下面是一个示例HTML文件，其中显示了各种不同的数据输出方法。我已经展示了如何从隐藏的画布获取数据，但是您可以很容易地从实例化的画布元素或它们的数组中获取数据。我已经演示了如何将画布数据复制到另一个画布、图像、新窗口/

从

x = document.getElementsByTagName('CANVAS');
x[n]的返回值为[object HtmlCanvaElement]

显示列表项的内容可以使用innerHTML完成，但我找不到显示画布项内容的示例

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

下面是一个示例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>


帆布试验
var帆布；
var画布隐藏；
var-img；
var-ctxHidden；
var-ctx；
函数init（）{
console.log（'init'）；
canvasHidden=document.getElementById（'canvasHidden'）；
canvas=document.getElementById（'canvas'）；
img=document.getElementById（'img'）；
ctxHidden=canvasHidden.getContext（'2d'）；
var imgToLoad=新图像（）；
imgToLoad.onload=函数（事件）{
ctxHidden.drawImage（event.target，0，0，canvashhidden.width，canvashhidden.height）；
};
imgToLoad.src=“Example.jpg”；
canvas.width=canvasHidden.width；
canvas.height=canvasHidden.height；
ctx=canvas.getContext（'2d'）；
}
函数toCanvas（）{
putImageData（ctxHidden.getImageData（0,0，ctx.canvas.width，ctx.canvas.height），0,0）；
}
函数toImage（）{
img.src=canvasHidden.toDataURL（）；
}
函数toTab（）{
window.open（canvasHidden.toDataURL（））；
}
//警告：这可能需要相当长的时间，具体取决于图像的大小。
//您可能希望仅显示有限的像素数据，具体取决于您的需要。
函数toConsole（）{
//在控制台上显示所有数据。。。
var data1=ctxHidden.getImageData（0,0，canvashhidden.width，canvashhidden.height）；
console.log（data1）；
//或者只是一个像素（可以很容易地修改以显示小范围的像素）。。。
var x=32；
变量y=25；
var data2=ctxHidden.getImageData（x，y，1，1）.data；
对于（变量i=0；i
画
想象
扣
安慰
有关getImageData的信息，请单击此处：

关于toDataURL的信息：

如果我正确理解了问题，您正在尝试在画布上绘制图像。但是请注意，HTML中的画布元素由脚本填充，而不是由
标记之间的内容填充。我的方法是从数组中获取canvas元素，将其附加到文档中的某个位置。然后，要检索画布的内容，请运行脚本。这就是你想做的吗？@AgataB，你说得对。这就是我想做的。我相信一个集合的行为——或错误行为——与数组不同。我对Image和dataURL有一定的理解，但canvas的渲染方式不同。你告诉我画布元素是由脚本填充的，这是正确的方向。但是，如何访问脚本？脚本通常位于
中标记，但在这一点上，仅将画布存储为其图像数据可能更容易/更快/更简单？这取决于从何处获取阵列。
可能包含一堆其他无关的内容。您可以使用获取图像数据，并在另一个画布元素上进行设置。或者，可以使用on-canvas元素将数据作为数据URL获取。然后，您可以将其用作图像元素的src，或者在另一个窗口中打开它，等等。由于我在下面向@markE解释的原因，toDataURL（）不起作用。我还没有尝试getImageData（），但它可能会工作，因为该命令正在获取已经存在的数据。