Node Script to crop out images from Super Mega Baseball Card image

README.md

Download all the results from : https://drive.google.com/drive/u/0/folders/1RtlftwSAvzLRdTmpspko-ejrwEhGO6Rl

The group team photos I used are from: https://drive.google.com/drive/folders/12hVarUZZ0vGPNSmyXAUcjealuxE4EK4S

The team logos are available from Metalhead: https://www.dropbox.com/sh/47d8tahwogx9qcn/AAC8nU1NF5_hVSBeF9MzRzIza/Logos?dl=0&subfolder_nav_tracking=1

I had to take two photos of each team because one player is always highlighted which makes their image bigger. So for my script you have to separate these two team photos into a ./teams and a ./first_players folders.

Make sure a ./updated directory als exists for the final images.

The coordinates in the code are based on 4k image resolution images (3840 × 2160 pixels) of the teams.

Run yarn install, and then then run node index.js from command line to run.

index.js

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const colGap = 53;

// Left, top
const firstRow = [410, 368];
const secondRow = [986, 902];
const thirdRow = [410, 1436];

const width = 331;
const height = 490;

getImages('teams', 1); // gets all of the players excpet first player (who is highlighted)
getImages('first_players', 0, 0); // gets that first player

function getImages(folder, start = 0, end = 20) {
  console.log(`start ${folder}`);
  const directoryPath = path.join(__dirname, `./${folder}`);

  fs.readdir(directoryPath, function (err, files) {
    if (err) {
      return console.log('Unable to scan directory: ' + err);
    }

    files.forEach(function (file, idx) {
      for (let i = start; i <= end; i++) {
        let left, top, itemLeft;
        if (i < 8) {
          [left, top] = firstRow;
          itemLeft = left + (width + colGap) * i;
        } else if (i < 13) {
          [left, top] = secondRow;
          itemLeft = left + (width + colGap) * (i - 8);
        } else {
          [left, top] = thirdRow;
          itemLeft = left + (width + colGap) * (i - 13);
        }

        sharp(`./${folder}/${file}`)
          .extract({ left: itemLeft, top, width, height })
          .png({ adaptiveFiltering: true })
          .toFile(`./updated/${idx}-${i}.png`, (err) => {
            console.log(err);
          });
      }
    });
  });
}

package.json

{
  "name": "smb_images",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "sharp": "^0.26.1"
  }
}

Here's a base team photo to put in the ./teams folder to test with:

And some results examples: