DEV Community: Jakub Chodorowicz

How to copy and crop image using the Canvas browser API

Jakub Chodorowicz — Sat, 13 May 2023 10:21:22 +0000

Not every day you need to craft a utility that allows cropping an image in the browser, but in case the day has come, here's how to do it using Canvas APIs.

Assuming you have the URL (or base64 encoded data) of an image you want to crop, then the first to do is to create a DOM Image element:

const image = new Image();
image.src = src;
image.crossOrigin = 'Anonymous';

Let's assume you're given the size and positioning of the desired cropped part (x, y, width, height). Let's create the Canvas element with the desired crop size (width and height) and render the appropriate part of the source image into the newly created Canvas element.

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d');
context.drawImage(image, x, y, width, height, 0, 0, width, height);

Now there's only one thing left to do: return the base64-encoded data of the cropped part.

return canvas.toDataURL('image/jpeg');

Here's the full function that powers cropping:

interface Props {
  x: number;
  y: number;
  width: number;
  height: number;
  src: string;
}

export async function getPartOfImage({
  x,
  y,
  width,
  height,
  src,
}: Props): Promise<string | undefined> {
  if (width === 0 || height === 0) {
    return;
  }
  const image = new Image();
  return new Promise((resolve) => {
    image.src = src;
    image.crossOrigin = 'Anonymous';

    // remember that loading image is async
    image.addEventListener('load', () => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');

      if (!context) {
        return;
      }

      canvas.width = width;
      canvas.height = height;
      context.drawImage(image, x, y, width, height, 0, 0, width, height);
      const croppedData = canvas.toDataURL('image/jpeg');

      resolve(croppedData);
    });
  });
}

Cool, that's pretty neat. But let's try to make it more interactive and see how somebody can use it in real life in a simple React application.

Let's use @bmunozg/react-image-area to allow selecting part of the image as a crop area. We're keeping the selected area in the state in areas variable, and handling changes to the selected area by calling onChangeHandler with the new area that the user has selected.

//...
const [croppedImage, setCroppedImage] = useState<string | undefined>(undefined);
const [areas, setAreas] = useState<IArea[]>([]);
// ...
return (
  <AreaSelector
    areas={areas}
    onChange={(areas) => onChangeHandler(areas, source)}
    maxAreas={1}
  >
    <SourceImage />
  </AreaSelector>
);

And here's how the handler looks like:

const onChangeHandler = useMemo(
  () => async (areas: IArea[], image: string) => {
    setAreas(areas); // let's store selected area

    const { naturalWidth, clientWidth } = imageRef.current ?? {
      naturalWidth: 0,
      clientWidth: 0,
    };

    // let's not divide by 0
    if (naturalWidth === 0) {
      return;
    }

    // the image in the browser might not be rendered at 100% of its width
    //  so we need to adjust the widths sent to cropping function, since it operates
    //  on dimensions of full width of the image
    const ratio = clientWidth / naturalWidth;

    const area = areas[0];

    // we only set new crop after user has finished dragging the crop area
    if (!area.isChanging) {
      const { x, y, width, height } = area;
      // same function that was used before to get cropped image using Canvas
      const screenshotArea = await getPartOfImage({
        x: x / ratio,
        y: y / ratio,
        width: width / ratio,
        height: height / ratio,
        src: image,
      });
      if (screenshotArea) {
        setScreenshotSize({ width: area.width, height: area.height });
        setCroppedImage(screenshotArea);
      }
    }
  },
  []
);

There's a need for some trickery to get the right crop if the source image renders at a reduced size. The crop area renders over the image, which is rendered in a flex layout, potentially not a full size. But the crop function getPartOfImage operates on the full-size dimensions. That's why we need to calculate the ratio to scale the crop size and x, y positions to match the image's actual size.

And voila. Here's the full version of the app.

How to copy markdown URL and title using JXA in Raycast (JavaScript automation for macOS)

Jakub Chodorowicz — Sun, 27 Mar 2022 17:37:38 +0000

I was looking for a script that would copy markdown formatted URL and title [Title of Page](https://url.of.page.com) from multiple browsers since I'm using different browsers regularly. This kind of script can be used standalone or in one of the macOS automation apps like Alfred or Raycast.

There are multiple examples of AppleScript, but most of them don't cater to multiple browsers. Also, as it turns out AppleScript automation is really cumbersome to work with. Its syntax was supposed to be readable, and it is, but due to that nature, it's not easy to write in. I'm not a fan of languages that try to mimic natural languages too much.

But as it turns out Since macOS Yosemite JavaScript is the first-class automation language. It's was much easier to create a more compact version of this script in markdown.

You can find the current version of the script in the following repository: chodorowicz/copy-markdown-url-and-title: Script to copy URL and title from current browser.

To add it to Raycast follow instructions detailed here: raycast/script-commands:.

How to style markdown code blocks in VS Code

Jakub Chodorowicz — Sun, 27 Jun 2021 21:55:25 +0000

Here's a quick tip for everybody using VS Code for viewing markdown files with code blocks. It might be handy for all of you to use VS Code as a note-taking app.

The problem is that by default, in VS Code markdown edit mode (not the preview mode, that's an entirely different story), code blocks are not very clearly styled. They don't look much different than other types of text, and VS Code doesn't offer an easy way to achieve that. The main problem is that VS Code theming doesn't allow setting the background color for different types of parsed syntax. Ideally, I'd like to set background color code blocks so they'd be easily distinguishable from the rest of the text.

Fortunately, there's a Highlight extension, which allows you to set much more advanced styling (background color 🎉) by defining regex patterns and styling rules. Of course, ideally, I'd prefer to use theme tokens from the tmTheme parser, but it seems it's the best we can have 🤷.

So, first, of course, install the extension. Then to define to enable code blocks highlighting for a particular repo, create a settings file .vscode/settings.json.

{
  "highlight.regexes": {
    "([^`])(`[^`]+?`)": {
      "filterLanguageRegex": "markdown",
      "regexFlags": "g",
      "filterFileRegex": ".*\\.md",
      "decorations": [{}, {
        "backgroundColor": "rgba(0, 0, 0, 0.05)",
        "border": "1px dashed rgba(0, 0, 0, 0.1)",
        "borderRadius": "3px"
      }, {}]
    },
    "(```

.+?

```)": {
      "regexFlags": "gs",
      "decorations": {
        "backgroundColor": "rgba(0, 0, 0, 0.05)",
        "isWholeLine": true,
      },
      "filterLanguageRegex": "markdown",
      "filterFileRegex": ".*\\.md"
    }
  }
}

And now, after applying the settings (drums 🥁🥁🥁).

There's a little bit of regex trickery here around selecting single backticks ([^`])(`[^`]+?`) and triple backticks group


.+?

```) ```

`. After that, there's only styling left. I'm using backgrounds and a bit of border color and radius in case of inline code blocks, but you [can do a little bit more with this API](https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions).