Canvasの画像をコンソールに描画する

Chromeのコンソールなら、Canvasの画像をコンソールに描画できそうです。
CanvasやImageDataを操作している最中に、わけわからなくなってきたらコンソールで確認するという手もありそうです。

参考
https://stackoverflow.com/questions/26283936/stylized-console-logging
https://stackoverflow.com/questions/36885562/google-chrome-console-print-image

Canvasの画像をコンソールに描画

const width = canvas.width;
const height = canvas.height;
const dataurl = 'data:image/png;base64,' + canvas.toDataURL('image/png').replace(/^.*,/, '');
const style = 'font-size: 1px; line-height: ' + height + 'px; padding: ' + height * 0.5 + 'px ' + width * 0.5 + 'px; background-size: ' + width + 'px ' + height + 'px; background: url(' + dataurl + ') no-repeat;';
console.log('%c', style);

ImageDataの画像をコンソールに描画

応用すれば、ImageDataもコンソールに描画できます。

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = canvas.width = imgdata.width;
const height = canvas.height = imgdata.height;
context.putImageData(imgdata, 0, 0);
const dataurl = 'data:image/png;base64,' + canvas.toDataURL('image/png').replace(/^.*,/, '');
const style = 'font-size: 1px; line-height: ' + height + 'px; padding: ' + height * 0.5 + 'px ' + width * 0.5 + 'px; background-size: ' + width + 'px ' + height + 'px; background: url(' + dataurl + ') no-repeat;';
console.log('%c', style);

Canvasの画像を部分的にコンソールに描画

ImageDataのやり方を応用すればCanvasの部分的な描画も可能です。

const context = canvas.getContext('2d');
const imgdata = context.getImageData(sx, sy, sw, sh); // 描画したい部分をgetImageData
const printCanvas = imageDataToCanvas(imgdata);
const width = printCanvas.width;
const height = printCanvas.height;
const dataurl = 'data:image/png;base64,' + printCanvas.toDataURL('image/png').replace(/^.*,/, '');
const style = 'font-size: 1px; line-height: ' + height + 'px; padding: ' + height * 0.5 + 'px ' + width * 0.5 + 'px; background-size: ' + width + 'px ' + height + 'px; background: url(' + dataurl + ') no-repeat;';
console.log('%c', style);


function imageDataToCanvas(imgdata) {
	const canvas = document.createElement('canvas');
	const context = canvas.getContext('2d');
	canvas.width = imgdata.width;
	canvas.height = imgdata.height;
	context.putImageData(imgdata, 0, 0);
	return canvas;
}

ImageData使わず、コピー先のcanvasにdrawImageする方法でも実現できますが、
上記の方法で、どこを抽出したいのかgetImageDataにまとめたほうがわかりやすい気がしました。

const context = canvas.getContext('2d');
const printCanvas = document.createElement('canvas');
// 部分コピー
printCanvas.width = sw;
printCanvas.height = sh;
printCanvas.getContext('2d').drawImage(canvas, sx, sy, sw, sh, 0, 0, sw, sh);

const width = printCanvas.width;
const height = printCanvas.height;

const dataurl = 'data:image/png;base64,' + printCanvas.toDataURL('image/png').replace(/^.*,/, '');
const style = 'font-size: 1px; line-height: ' + height + 'px; padding: ' + height * 0.5 + 'px ' + width * 0.5 + 'px; background-size: ' + width + 'px ' + height + 'px; background: url(' + dataurl + ') no-repeat;';
console.log('%c', style);