Only capture the story

[samturrell]

Is it possible to capture just the contents of the story and not the full 600x800 viewport?

For example i have an icon that's 35x35 but the story is extremely large in comparison. This means that when using with reg-suit with a threshold of 0.05 it doesn't detect the change.

I've seen there's a fullPage option, but this doesn't seem to do anything from what i've experienced

[Quramy]

600x800 is default viewport size and you can override viewport for each story with managed mode ( https://github.com/reg-viz/storycap/blob/master/README.md#managed-mode ). For example,

import React from 'react';
import MyComponent from './MyComponent';

export default {
  title: 'MyComponent',
  parameters: {
    screenshot: {
      viewport: {
          width: 50,
          height: 50,
       },
    },
  },
};

export const normal = () => <MyComponent />;

[thomaswelton]

@samturrell jimp has an auto crop feature that will remove same color borders from an image.
The below will take the screenshot directory cropping all pngs leaving 5px around the edges

var regconfig = require("./regconfig.json");
var glob = require("glob");
const jimp = require("jimp");

const screenshotDir = regconfig.core.actualDir;

glob(`${screenshotDir}/**/*.png`, (err, files) => {
  if (err) {
    throw err;
  }

  files.forEach(file => {
    jimp.read(file).then(image => {
      image.autocrop({ cropOnlyFrames: false, tolerance: 0, leaveBorder: 5 });
      image.write(file);
    });
  });
});

Before:

After: