
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:

```ts
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.

```ts
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.

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

Here's the full function that powers cropping:

```ts
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);
    });
  });
}
```

<IFrame
  src="https://codesandbox.io/embed/image-cropping-using-canvas-2n4kfw?fontsize=14&hidenavigation=1&initialpath=%2Fjsonly.html&module=%2Fsrc%2Findex-jsonly.ts&moduleview=1&theme=dark"
  style={{
    width: '100%',
    height: '700px',
    border: '0',
    borderRadius: '4px',
    overflow: 'hidden',
  }}
  title="Image Cropping Using Canvas"
/>

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](https://www.npmjs.com/package/@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.

```tsx
//...
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:

```tsx
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.

<IFrame
  src="https://codesandbox.io/embed/image-cropping-using-canvas-2n4kfw?fontsize=14&hidenavigation=1&initialpath=%2Freact.html&theme=dark"
  style={{
    width: '100%',
    height: '700px',
    border: '0',
    borderRadius: '4px',
    overflow: 'hidden',
  }}
  title="Image Cropping Using Canvas"
/>


Browser Canvas APIs provide a way to crop any image

How to copy and crop image using the Canvas browser API


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.

<Image
  alt="Copy Markdown Title and URL in Raycast"
  src="/static/images/copy-markdown-title-raycast.jpg"
  width={1869}
  height={1317}
  layout="responsive"
/>

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](https://en.wikipedia.org/wiki/AppleScript#JavaScript_for_Automation) 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](https://github.com/chodorowicz/copy-markdown-url-and-title).

To add it to Raycast follow instructions detailed here: [raycast/script-commands:](https://github.com/raycast/script-commands).

<Image
  alt="Copy Markdown Title and URL JXA script"
  src="/static/images/copy-markdown-title.png"
  width={1684}
  height={1212}
/>


A script that copies markdown URL and title from multiple browsers on macOS

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


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.

<Image alt="VS Code lack of code blocks styling" src="/static/images/styling-code-1.jpg" width={1600/2} height={652/2} />

Fortunately, there's a [Highlight](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-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`.

```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 🥁🥁🥁).

<Image alt="VS Code with code blocks styling" src="/static/images/styling-code-2.jpg" width={1598/2} height={648/2} />

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).


It's possible to style code blocks in a rich way in VS Code with a little help of Highlights extension

Do you want to get updates about new content? Leave your email or use RSS Feed.