Question

I’ve got a pretty longwinded set of algorithms running on an image source progressively (it’s running some computer vision image processes). It would take a while to break them up and visually debug them to a test canvas. Chrome crashes everytime i try to log the canvaspixelarray to the console even though the canvas is only 100x100px,

Can anyone think of a way to view the image effect easily either as data or as result. I remember I saw a way to pop a new browser with the canvas output as an image but i cant find the example again.

Answer 1

If I understand correctly, you have an initial canvas element that hold the processed image, and you are trying to use the getImageData to retrieve the current image.

Have you tried using the toDataUrl method and just inserting its output to a src attribute of an img tag?

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