просмотр canvaspixelarray

Question

У меня есть довольно длинный набор алгоритмов, которые постепенно работают на источнике изображения (он запускает некоторые процессы обработки изображений компьютерного зрения).Потребуется некоторое время, чтобы разбить их и визуально отладить на тестовом холсте.Chrome вылетает каждый раз, когда я пытаюсь записать canvaspixelarray на консоль, даже если canvas составляет всего 100x100px,

Может кто-нибудь придумать способ легко просмотреть эффект изображения в виде данных или результата.Я помню, что видел способ открыть новый браузер с выводом холста в виде изображения, но я не могу найти пример снова.

Answer 1

Предложение Игорса напомнило мне, что существует простой способ, который заключается в простом открытии нового окна в каждом цикле итерации сценария обработки, чтобы я мог видеть, где происходит ошибка:

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

Answer 2

Если я правильно понимаю, у вас есть начальный элемент canvas, который содержит обработанное изображение, и вы пытаетесь использовать getImageData для получения текущего изображения.

Вы пытались использовать toDataUrl метод и просто вставить его вывод в атрибут src тега img?

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

Answer 3

Я думаю, что предыдущие ответы не дают правильного ответа, поскольку у вас есть модифицированный CanvasPixelArray внутри объекта ImageData, а не холст.

Вы можете легко импортировать 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);
});​