Merge pull request #4236 from Tyriar/console_image

Add console.image helper

Author: Tyriar

demo/client.ts

@@ -992,3 +992,33 @@ function addOverviewRuler(): void {
   term.registerDecoration({ marker: term.registerMarker(10), overviewRulerOptions: { color: '#ffffff80', position: 'full' } });
 }
 
+(console as any).image = (source: ImageData | HTMLCanvasElement, scale: number = 1) => {
+  function getBox(width: number, height: number): any {
+    return {
+      string: '+',
+      style: 'font-size: 1px; padding: ' + Math.floor(height/2) + 'px ' + Math.floor(width/2) + 'px; line-height: ' + height + 'px;'
+    };
+  }
+  if (source instanceof HTMLCanvasElement) {
+    source = source.getContext('2d')?.getImageData(0, 0, source.width, source.height)!;
+  }
+  const canvas = document.createElement('canvas');
+  canvas.width = source.width;
+  canvas.height = source.height;
+  const ctx = canvas.getContext('2d')!;
+  ctx.putImageData(source, 0, 0);
+
+  const sw = source.width * scale;
+  const sh = source.height * scale;
+  const dim = getBox(sw, sh);
+  console.log(
+    `Image: ${source.width} x ${source.height}\n%c${dim.string}`,
+    `${dim.style}background: url(${canvas.toDataURL()}); background-size: ${sw}px ${sh}px; background-repeat: no-repeat; color: transparent;`
+  );
+  console.groupCollapsed('Zoomed');
+  console.log(
+    `%c${dim.string}`,
+    `${getBox(sw * 10, sh * 10).style}background: url(${canvas.toDataURL()}); background-size: ${sw * 10}px ${sh * 10}px; background-repeat: no-repeat; color: transparent; image-rendering: pixelated;-ms-interpolation-mode: nearest-neighbor;`
+  );
+  console.groupEnd();
+};