feat: Add shot on theme (#69)

web/src/themes/12-shot-on.ts

@@ -0,0 +1,54 @@
+import { Theme } from './draw';
+
+const calculateMargin = (image: HTMLImageElement) => {
+  return image.width > image.height
+    ? { top: image.width * 0.02, right: image.width * 0.02, bottom: image.width * 0.05, left: image.width * 0.02 }
+    : { top: image.height * 0.02, right: image.height * 0.02, bottom: image.height * 0.05, left: image.height * 0.02 };
+};
+
+const shotOn: Theme = async (photo, image, options) => {
+  const canvas = document.createElement('canvas');
+  const { top, right, bottom, left } = calculateMargin(image);
+  canvas.width = image.width + left + right;
+  canvas.height = image.height + top + bottom;
+
+  const context = canvas.getContext('2d')!;
+  context.fillStyle = '#ffffff';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(image, left, top, image.width, image.height);
+
+  const fontSize = image.height > image.width ? image.width * 0.03 : image.height * 0.03;
+  context.fillStyle = '#000000';
+  context.font = `normal 200 ${fontSize}px Barlow`;
+  context.textAlign = 'left';
+  context.textBaseline = 'middle';
+  context.fillText('Shot on ', left, canvas.height - bottom / 2);
+  context.font = `normal 500 ${fontSize}px Barlow`;
+  context.fillText(
+    [
+      [
+        options.showCameraMaker ? options.overrideCameraMaker || photo.make : null,
+        options.showCameraModel ? options.overrideCameraModel || photo.model : null,
+      ]
+        .filter(Boolean)
+        .join(' '),
+      options.showLensModel ? options.overrideLensModel || photo.lensModel : null,
+    ]
+      .filter(Boolean)
+      .join(' + '),
+    left + context.measureText('Shot on ').width,
+    canvas.height - bottom / 2
+  );
+
+  context.textAlign = 'right';
+  context.font = `normal 200 ${fontSize}px Barlow`;
+  context.fillText(
+    ['ISO ' + photo.iso, photo.focalLength, photo.fNumber, photo.exposureTime + 's'].filter(Boolean).join('   '),
+    canvas.width - right,
+    canvas.height - bottom / 2
+  );
+
+  return canvas;
+};
+
+export default shotOn;

web/src/themes/index.ts

@@ -10,19 +10,21 @@ import monitor from './08-monitor';
 import strap from './09-strap';
 import darkStrap from './10-dark-strap';
 import justFrame from './11-just-frame';
+import shotOn from './12-shot-on';
 
 const themes: { name: string; func: Theme }[] = [
   { name: 'No Frame', func: noFrame },
   { name: 'Cinema Scope', func: cinemaScope },
+  { name: 'Just Frame', func: justFrame },
+  { name: 'Grid Lines', func: gridLines },
+  { name: 'Shot On', func: shotOn },
   { name: 'Simple', func: simple },
   { name: 'Dark Simple', func: darkSimple },
   { name: 'Inside', func: inside },
   { name: 'Dark Inside', func: darkInside },
-  { name: 'Grid Lines', func: gridLines },
   { name: 'Monitor', func: monitor },
   { name: 'Strap', func: strap },
   { name: 'Dark Strap', func: darkStrap },
-  { name: 'Just Frame', func: justFrame },
 ];
 
 export default themes;