Question

我已经逐步在图像源上运行了一套非常长的算法（它正在运行一些计算机视觉图像处理）。将它们分解并在视觉上将它们调试到测试画布需要一段时间。每当我尝试将canvaspixelarray记录到控制台时Chrome都会崩溃，即使画布只有100x100px，

任何人都可以想到一种方法来轻松地以数据或结果的形式查看图像效果。我记得我看到了一种用画布输出作为图像弹出新浏览器的方法，但我再也找不到这个例子了。

Answer 1

如果我理解正确，您有一个初始canvas元素来保存已处理的图片，并且您尝试使用getImageData来检索当前图像。

您是否尝试过使用toDataUrl方法并将其输出插入src代码的img属性？

$('img#temp').attr('src', canvas.toDataURL());

Answer 2

Igors建议提醒我，有一个简单的方法，只是在处理脚本的每个迭代循环上弹出一个新窗口，这样我就可以看到它出错了：

window.open(canvas.toDataURL() ,"win"+(Math.random()*1000));

Answer 3

我认为之前的答案并不正确，因为你所拥有的是在ImageData对象中修改的CanvasPixelArray，而不是画布。

您可以轻松地将ImageData导入新画布。你可以这样做（fiddle）：

$(function() {
    // Let's draw something
    var ctx = $('canvas').get(0).getContext('2d');
    ctx.beginPath();
    ctx.moveTo(100, 50);
    ctx.arc(50, 50, 50, 0, 2 * Math.PI);
    ctx.fill();

    // Get some ImageData to work on
    var originalData = ctx.getImageData(0, 0, 100, 100);

    // Create another ImageData from its pixel array
    // This will be empty, no image data is copied from the original context
    var outputData = ctx.createImageData(100, 100);
    outputData.width = 100;
    outputData.height = 100;
    for (i = 0; i < originalData.data.length; i++) {
        outputData.data[i] = originalData.data[i];
    }

    // Create a new canvas
    $('body').append('<canvas width=100 height=100 />');
    var outputCanvas = $('canvas').get(1);
    console.log(outputCanvas);

    // Let's now write our data to the new canvas
    outputCanvas.getContext('2d').putImageData(outputData, 0, 0);
});

查看canvaspixelarray

3 个答案: