私は、画像ソース上で徐々に実行されているかなり長時間のアルゴリズムを持っています（コンピュータービジョン画像処理を実行しています）。それらを分解してテストキャンバスに視覚的にデバッグするには、しばらく時間がかかります。キャンバスが100x100pxであるにもかかわらず、canvaspixelarrayをコンソールに記録しようとするたびにChromeがクラッシュする。canvaspixelarrayを見る
誰もデータや結果として画像効果を簡単に表示する方法を考えることはできますか？私はキャンバスの出力を画像として新しいブラウザをポップする方法を見たのを覚えていますが、もう一度その例を見つけることはできません。
私が正しく理解している場合、処理されたイメージを保持する最初のcanvas要素があり、現在のイメージを取得するのにgetImageDataを使用しようとしています。
toDataUrlメソッドを使用し、その出力をsrc属性のimgタグに挿入しようとしましたか？
$('img#temp').attr('src', canvas.toDataURL());
Igorsの提案は、私はどこが間違っているつもりだった見ることができるように処理スクリプトの各反復ループに新しいウィンドウをポップアップするだけだった。このによる簡単な方法があったことを思い出し：
window.open(canvas.toDataURL() ,"win"+(Math.random()*1000));
私はあなたが持っているものがキャンバスではなく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);
});