Content-Aware Image Resizing using HTML5 <canvas>

This page is a very basic demo of Content-Aware Image Resizing (CAIR) using seam carving.
The demo is very slow, so you can see a screenshot of the effect with a 50% resize if you don’t want to wait. There is a lot of room for improvement.

The algorithm is the following:

1. For each pixel from the top row, find the pixel under it that has the closest color (directly under or 1 pixel to the side.)
2. Add the color distance to a column score.
3. Repeat until arriving at the bottom row.
4. Repeat steps 1 – 3 for each column.
5. Remove the column with the lowest total score.

Click here to remove 20 columns (warning: very slow)

---

← Original image

---

← <img> tag, resized by the browser

---

← Context-aware resizing in <canvas> (seam carving)

---