DEV Community: Winson Yang

Build a local crop-planning overlay with the Canvas API

Winson Yang — Sun, 01 Nov 2026 08:15:50 +0000

A thumbnail can have enough pixels and still cut off the thing that makes it recognizable. Before exporting several versions, it helps to make the crop itself visible.

This small, dependency-free HTML page displays a local still image, dims the area a crop will discard, and lets you move the retained rectangle. It does not upload the file or save an edited copy. Save the code as crop-overlay.html and open it in a modern browser.

What to check

Start with the intended final aspect ratio. Move the horizontal and vertical sliders until the important detail stays inside the blue box. A centered crop is only a starting point: a face near an edge, a long garment or an asymmetric icon may need a different position.

For an example, a 1600 × 900 image cropped to 1:1 retains 900 × 900 pixels. The horizontal slider moves that square across the 700 pixels of spare width. The vertical slider does nothing in this case because no height is spare. This is expected, not a broken control.

The complete page

<!doctype html>
<meta charset="utf-8">
<title>Crop planning overlay</title>
<style>
body{font:16px system-ui;max-width:800px;margin:24px auto;padding:0 16px}
canvas{max-width:100%;height:auto;background:#ddd;display:block;margin:16px 0}
label{display:block;margin:12px 0} input[type=range]{width:240px}
</style>
<h1>Preview what a crop removes</h1>
<p>This page uses your local image. The blue box is the retained area.</p>
<label>Image <input id="file" type="file" accept="image/png,image/jpeg,image/webp"></label>
<label>Target ratio <select id="ratio"><option value="1">1:1</option><option value="0.8">4:5</option><option value="1.7777777778">16:9</option></select></label>
<label>Horizontal position <input id="x" type="range" min="0" max="1" step="0.01" value="0.5"></label>
<label>Vertical position <input id="y" type="range" min="0" max="1" step="0.01" value="0.5"></label>
<p id="status" role="status">Choose a still image.</p>
<canvas id="canvas" width="720" height="480"></canvas>
<script>
const $ = id => document.getElementById(id);
const ctx = $('canvas').getContext('2d');
let bitmap, request = 0;
function cropRect(w, h, ratio, x, y) {
  const cw = Math.min(w, h * ratio), ch = cw / ratio;
  return {x: (w-cw)*x, y: (h-ch)*y, w: cw, h: ch};
}
function draw() {
  if (!bitmap) return;
  const s = Math.min(720/bitmap.width, 600/bitmap.height, 1);
  const c = $('canvas');
  c.width = Math.max(1, Math.round(bitmap.width*s));
  c.height = Math.max(1, Math.round(bitmap.height*s));
  const r = cropRect(bitmap.width, bitmap.height,
    Number($('ratio').value), Number($('x').value), Number($('y').value));
  const sx = c.width/bitmap.width, sy = c.height/bitmap.height;
  ctx.drawImage(bitmap, 0, 0, c.width, c.height);
  ctx.fillStyle = 'rgba(0,0,0,.55)';
  ctx.fillRect(0, 0, c.width, c.height);
  ctx.drawImage(bitmap, r.x,r.y,r.w,r.h, r.x*sx,r.y*sy,r.w*sx,r.h*sy);
  ctx.strokeStyle = '#00bfff'; ctx.lineWidth = 3;
  ctx.strokeRect(r.x*sx,r.y*sy,r.w*sx,r.h*sy);
  $('status').textContent = `Retained: ${Math.round(r.w)} × ${Math.round(r.h)} px. ` +
    `Source: ${bitmap.width} × ${bitmap.height} px. This is a preview, not an export.`;
}
$('file').onchange = async () => {
  const id = ++request, file = $('file').files[0];
  bitmap?.close(); bitmap = undefined;
  ctx.clearRect(0,0,$('canvas').width,$('canvas').height);
  if (!file) { $('status').textContent = 'Choose a still image.'; return; }
  if (file.size > 12*1024*1024) { $('status').textContent = 'Choose a file under 12 MiB.'; return; }
  try {
    const next = await createImageBitmap(file);
    if (id !== request) { next.close(); return; }
    bitmap = next; draw();
  } catch { if (id === request) $('status').textContent = 'This image could not be decoded.'; }
};
for (const id of ['ratio','x','y']) $(id).oninput = draw;
</script>

Why this geometry works

The largest crop at a chosen ratio fits within both source dimensions. Its width is the smaller of the source width and sourceHeight * ratio; its height is that width divided by the ratio. Each position slider selects a fraction of the unused space. The preview scales to fit 720 × 600 pixels without enlarging a small source image. The dimensions in the status line refer to the source crop, not the on-screen preview.

The second drawImage call redraws only the selected source rectangle over a dimmed full image. MDN documents the source and destination rectangle form of drawImage. The request counter prevents an older asynchronous image decode from replacing a newer selection; discarded bitmaps are closed.

Four useful review cases

I build the following products, so these are examples from my own tools, not independent endorsements:

For an Emote Resizer source, check whether the expression or silhouette survives a square crop before making tiny exports. This preview does not simulate tiny-size legibility or GIF animation.
For a PawMotif portrait, keep ears, whiskers and distinctive markings away from the edge. Decide on a frame ratio before ordering a separate print; the product itself supplies digital artwork.
For a TryOnSwap outfit concept, preserve the hem and relevant accessories when making a vertical crop. Keeping them in frame does not validate AI garment accuracy or real-world fit.
Before assembling a Free Image Merger comparison, review each source at the same target ratio. A consistent crop makes scale and framing differences easier to notice.

Limits and a small check plan

This is a planning overlay. It does not export, strip metadata, validate platform upload rules, manage color profiles or promise print quality. Only still PNG, JPEG and WebP are offered. The 12 MiB file limit reduces accidental large inputs but does not bound decoded memory: a highly compressed image can still be enormous. Close the page if a device struggles with a large file.

Try a landscape source with a square crop, a portrait source with a wide crop, and a square source at 1:1. At the two ends of either slider, the crop should stay within the image. For a ratio already matching the image, both sliders should leave the full image unchanged. Finally, select two files quickly and check that the last selection is the one shown.

The crop geometry was checked separately for landscape, portrait and matching-ratio cases. Browser decoding, color appearance and performance remain device-dependent. The code and this article were prepared with AI assistance and should be reviewed before adapting them into a production upload flow.

A data-minimization worksheet for creative gifts and images

Winson Yang — Wed, 28 Oct 2026 14:47:18 +0000

A birthday song, a pet portrait, an emote, or an outfit mockup can start with a surprisingly sensitive set of inputs: faces, names, family stories, addresses, and draft files. Before choosing a tool, decide what the project actually needs. This worksheet helps you make that decision without assuming that every tool has the same privacy model.

1. Make a three-column inventory

Write down each input before uploading or sharing it:

Input	Needed for the output?	Less revealing alternative
Person's full name	Sometimes	First name, nickname, or no name
A face photo	Only for an image or video based on that person	A consented image with the background cropped
A family story	A specific detail may help	A general memory without a date, address, or other people's names
Pet photo	Only if a pet's appearance matters	A picture without a visible address tag or location clues
Finished file	Needed to deliver	A copy with a neutral filename

Keep only what is needed. Cropping a background can remove incidental information, but it is not a guarantee of anonymity: a face, clothing, reflection, or unique setting may still identify someone.

2. Ask the people represented

Get permission from the person whose image or story you use, and ask separately before publishing or sharing outside the intended recipient. If a photo includes someone else, crop them out or obtain their permission too. For children or anyone unable to consent independently, a parent or guardian should make the decision. Avoid using a person's image to imply an endorsement they did not give.

A practical note to send before creating: “I'd like to use this photo to make a private gift. Are you comfortable with that, and may I share the finished result with anyone else?” A yes to a private gift is not a yes to a public post.

3. Check where processing happens

Before entering personal material, look for a product's current privacy policy and retention settings. Check whether processing is local or remote, whether uploads are stored, whether deletion is available, whether material can be used for training, and whether the output can be made public. If any answer is unclear and the material is sensitive, use a less revealing input or choose a different workflow.

Two of my browser-based utilities explicitly say the image operation runs on the device: Emote Resizer resizes emotes, and Free Image Merger arranges images into a composite. Local processing of images does not mean the page makes no network requests at all; check the site's own current disclosures.

For a personalized Songifted song or MakeItRap video, write the brief with a nickname and a non-sensitive memory first. For a PawMotif pet portrait or TryOnSwap outfit concept, check the image and sharing permissions first. For these products, review their own current policies and settings before sending any personal information; do not assume they process locally.

4. Keep the delivery small

Check the export on your own device first: names, faces, captions, and backgrounds.
Give the file a neutral name such as gift-final.mp4 rather than a full name and date of birth.
Choose a recipient-specific delivery method and review whether its link is public, expires, or can be forwarded.
Ask the recipient before using the result as a testimonial or public example.
Delete unnecessary source copies from your own devices and services when you no longer need them. Check each provider's actual deletion controls and retention terms; deleting your local copy does not delete a provider's copy.

Copyable decision card

Project:
People or pets represented:
Who agreed to the intended use?
Inputs strictly needed:
Inputs removed or generalized:
Where the tool says processing happens:
Provider retention/deletion terms checked on:
Who may receive the output?
Public sharing separately approved? yes / no
Source copies to remove and where:

Disclosure: I build and operate the six products linked above. This is a practical decision aid, not a claim that every service has identical privacy or retention practices. This article was prepared with AI assistance; verify each service's current terms before use.

Build a local file manifest for creative project handoffs in Python

Winson Yang — Wed, 28 Oct 2026 12:09:37 +0000

A creative project can produce several small files that look almost identical: a source image, exports for different chat placements, a comparison grid, an outfit concept and a song draft. Before handing them off, it helps to know exactly which files you are sending and whether a file changed after review.

Disclosure: I build Emote Resizer, Free Image Merger, TryOnSwap and Songifted, which are mentioned as examples below. This article was drafted with AI assistance and is my own educational resource, not an independent review.

What a manifest can and cannot do

A manifest lists a file's relative path, byte length and SHA-256 digest. Comparing two manifests helps detect changes in file content; it does not prove the content is correct, licensed, safe, accessible or approved. A hash also does not hide a sensitive file name. Store and share the manifest only with people who may see the file names.

Example folder structure

creative-project/
  sources/
    original.png
  exports/
    emote-small.png
    image-comparison.png
    outfit-concept.png
  music/
    approved-lyrics.txt
    preview-audio.mp3

Use only files that belong to the actual project; the names above are examples. Emote exports might come from Emote Resizer and a comparison image from Free Image Merger. A fashion concept can come from TryOnSwap, and a lyrics-and-audio gift from Songifted. These tools have different functions, preview terms and prices; a manifest does not change those terms. Keep private or unapproved images out of the folder you plan to share.

Generate an inventory locally

Save the following as manifest.py. It uses only the Python standard library and reads files without changing them. It skips symbolic links, reads in chunks, and prints sorted relative paths, byte sizes and hashes as JSON. Do not modify files while it runs; like any simple scan, it is not an atomic snapshot.

#!/usr/bin/env python3
"""Create a read-only SHA-256 inventory of regular files in a project folder."""
import hashlib
import json
import pathlib
import sys


def inventory(root: pathlib.Path) -> list[dict[str, object]]:
    records = []
    for path in sorted(root.rglob('*')):
        if path.is_symlink() or not path.is_file():
            continue
        digest = hashlib.sha256()
        with path.open('rb') as stream:
            for chunk in iter(lambda: stream.read(1024 * 1024), b''):
                digest.update(chunk)
        records.append({'path': path.relative_to(root).as_posix(),
                        'bytes': path.stat().st_size, 'sha256': digest.hexdigest()})
    return records


if __name__ == '__main__':
    if len(sys.argv) != 2 or not pathlib.Path(sys.argv[1]).is_dir():
        raise SystemExit('Usage: python3 manifest.py PROJECT_FOLDER')
    print(json.dumps(inventory(pathlib.Path(sys.argv[1]).resolve()), indent=2))

Run it from a terminal, replacing the paths with your own:

python3 manifest.py /path/to/creative-project > /path/outside-project/manifest.json

Write the output outside the scanned folder. Shell redirection creates the output file before the script starts; placing it inside the folder can cause the script to include its own incomplete output. If a file cannot be read, the program stops with an error rather than silently omitting it. Correct the permission or remove the file from the handoff folder and run again.

Review and compare

Open the files in the folder and check names, spelling, dimensions, consent, visual details and playback. Keep an approved reference copy.
Generate a manifest after the review. If you later receive or copy the files, generate another manifest from the received folder and compare the path, bytes and sha256 values. Different hashes indicate different bytes; the same hash is a useful integrity check, not a substitute for reviewing content.
Keep the source and export separate. Avoid committing sensitive images, lyrics, manifests or private names to a public repository.
Check the target service's current specifications and purchase conditions before promising a format or a free download. This sample script does not upload anything or alter product sites.

Making a stream emote easier to recognize

Winson Yang — Wed, 28 Oct 2026 10:46:37 +0000

A tiny emote has to communicate quickly. A few accessibility checks can make a set easier to understand for more people, even when the platform displays it at a small size or the viewer cannot distinguish every color.

Disclosure: I build Emote Resizer, mentioned below. This is my own practical guide, not an independent product review. This article was prepared with AI assistance and reviewed for accuracy before publication.

Give every emote a distinct job

List the reaction behind each design before drawing: celebrate, thank, surprise, concern and so on. If two designs both mean “happy,” decide whether viewers need both. Ask a reviewer who has not seen the names to describe each image in a few words. Confusion between two designs is useful feedback, not a failed test.

Use shape as well as color

Do not make color the only difference between two expressions. Change the mouth shape, eyebrows, pose or a simple symbol so the reaction remains recognizable in grayscale. This does not guarantee every viewer will distinguish the icons, but it gives them another cue when colors look similar or the screen is dim.

Try this quick review:

Put the designs on both a light and a dark background.
Look at them at the approximate size the destination displays.
Check them in grayscale or with reduced saturation.
Ask someone unfamiliar with the set what each one conveys.
Revise whichever pair is consistently confused, then test again.

Name and explain the set

Use short, recognizable names that describe the expression rather than an inside joke only the creator understands. Where the platform supports an accessible label or description, check it before publishing. If it does not, explain the meaning of custom emotes in a channel guide or a pinned introduction, and provide an equivalent in words when an emote carries important information.

Check the real export

Small previews can reveal problems the large artwork hides. Make a separate copy for the destination, verify its current dimensions and file rules, then open the exported image independently. Emote Resizer can create smaller versions in a browser; inspect the output before uploading, especially the facial expression, edges and any transparent areas.

Keep the editable originals and record which version was uploaded. If a viewer points out that two reactions are hard to distinguish, you can revise the source rather than trying to repair a tiny export.

A practical browser checklist for testing small transparent images

Winson Yang — Wed, 28 Oct 2026 09:40:40 +0000

Small icons and emotes often look fine in a design file but lose detail on a busy page. A useful test is to review the exported asset at its final display size, on both light and dark surfaces, before sharing it. This checklist works with any image editor and a modern browser.

1. Keep a source and an export

Keep the original artwork separate from the version you resize. Export a PNG when you need transparency, and use a clear filename such as wave-32.png. Check the target platform's current size and file rules before exporting; different products have different limits. Avoid repeatedly resizing the same already-small image, because each resampling pass can remove detail.

If you need a quick set of emote sizes, Emote Resizer is one option. I build it, so this is a product mention rather than an independent endorsement. Check the downloaded files against the destination's current requirements.

2. Test on contrasting backgrounds

Put each asset on white, near-black and a mid-tone background. Look for pale halos at the edges, accidental opaque rectangles, and important details that disappear at small sizes. A quick local HTML file can help:

<div class="samples">
  <div class="light"><img src="wave-32.png" alt="Waving hand"></div>
  <div class="dark"><img src="wave-32.png" alt="Waving hand"></div>
  <div class="mid"><img src="wave-32.png" alt="Waving hand"></div>
</div>
<style>
  .samples { display: flex; gap: 1rem; }
  .samples > div { padding: 1rem; }
  .samples img { width: 32px; height: 32px; object-fit: contain; }
  .light { background: white; }
  .dark { background: #171717; }
  .mid { background: #888; }
</style>

Replace the filename and description with your own. View the page at normal zoom and on the devices you expect people to use. A larger browser zoom is helpful for finding edge artifacts, but it cannot substitute for checking the real display size.

3. Check dimensions and meaning

Open the image in a browser or image viewer and check its actual pixel dimensions, not just the CSS display dimensions. If the image conveys information, give it a useful alternative description. If it is purely decorative next to equivalent text, an empty alt can prevent repeated announcements. For an emote picker, make sure the control itself has an understandable name and can be reached with a keyboard.

4. Prepare a review sheet

Place variants next to each other so a reviewer can compare them quickly. Label each variant and keep an untouched copy of the individual export; a contact sheet is for review, not a replacement for the required files. Free Image Merger can combine images in a browser. I also build this tool. Before using any service, check its current privacy information and avoid uploading sensitive artwork unless you are comfortable with the handling described there.

5. Final pass

Compare each export with the source and check for unwanted cropping.
Test the smallest intended size against light and dark backgrounds.
Confirm dimensions, transparency, filenames and any platform-specific limits.
Keep the original files so you can revise without degrading a small export.

The goal is a repeatable visual check, not a guarantee that an image will pass every platform's review.

Five web app workflows: local image tools, AI visuals and creative downloads

Winson Yang — Wed, 14 Oct 2026 01:37:48 +0000

I build five small web products: two tools for working with existing images, one for fashion visuals, one for personalized songs and one for digital pet portraits. Their interfaces use familiar words such as upload, preview and download, but those words refer to different workflows.

This walkthrough explains those differences using the products' current public behavior. It also gives readers a short checklist for evaluating an output before using or purchasing it.

Start by identifying the operation

Before choosing a tool, ask whether you need to transform an existing asset, combine several assets or generate something new. That distinction affects the input, the processing step and the output you should inspect.

Task	Starting point	Result to inspect
Community graphics	Existing artwork	Resized emote, badge or sticker
Image layout	Several existing images	One combined image
Fashion visual	Model photo and garment references	Generated clothing and scene details
Personalized song	Name, memories and an occasion	Lyrics, then an audio preview
Pet portrait	A pet photo and a style	A portrait preview, then a digital PNG

Two browser tools for existing images

Emote Resizer prepares emotes, badges, emoji and stickers for online communities. It provides platform presets, PNG and GIF workflows, generated file sizes and over-limit warnings. The resizing takes place locally in the browser. The review step is practical: check the dimensions, animation and file size against the receiving platform's requirements.

Free Image Merger has a different purpose. It combines photos side by side, vertically, in a grid or in a freestyle layout. Processing is local to the browser, with PNG, JPG and WebP export and no signup requirement. Here the review step is the composition: order, layout, spacing and whether the final combined image contains what you intended.

Both workflows start with assets you already have. They transform or arrange those inputs rather than generate new artwork.

A reference-based fashion workflow

TryOnSwap starts with a model photo and garment images. Its studio supports changing one garment, assembling an outfit and creating a fashion scene. Uploading references requires signing in; generation uses credits, with introductory credits after email verification and credit packs without a subscription.

The useful review questions are different from a resize operation. Are the garment details consistent? Is the model consistent? Does the scene match the intended presentation? A generated fashion visual is a creative concept, not a measurement of clothing size or fit.

Two creative download workflows

Songifted separates a personalized song into stages. You supply the recipient's name, occasion and memories, review the lyrics before singing, then listen to a free 45-second preview. Purchasing the full track is a later decision. Name spelling and personal details are worth checking while the output is still text; the preview then helps evaluate the musical direction.

PawMotif starts with a pet photo and a selected style. Users inspect a free portrait preview before deciding whether to buy the finished digital PNG. The delivery format matters: it is a digital download. Gallery frames are presentation mockups, so a physical print or frame requires a separate plan.

A small review checklist

Before exporting, publishing or purchasing an output, check:

The input: do you have the artwork, photo, garment reference or personal details the workflow actually needs?
The operation: are you resizing, arranging or generating?
The boundary: does processing stay in the browser, or does the workflow require an account and uploaded references?
The preview: are you looking at dimensions and file size, image details, lyrics or an audio excerpt?
The delivery: is the result an image file, a full song or a digital portrait, and is a purchase required for that result?

A successful export or a visible preview is the start of this review step. The final asset should be inspected for its intended use.

I am the builder of the products linked here. This is a product walkthrough based on their current website descriptions.

My $200/month AI tool audit: 6 subscriptions down to 2

Winson Yang — Sat, 21 Mar 2026 10:12:33 +0000

I'm a solo founder and I was subscribing to 6 AI tools: Claude, ChatGPT, Gemini, Manus, YouMind, and Spokenly. About $200/month total.

One day I realized I was spending more time deciding which AI to open than actually doing the work. So I did an audit.

The audit

For one week, I tracked every time I opened an AI tool and wrote down what I used it for. The result:

Claude: ~80% of everything
ChatGPT: ~10% (mostly quick brainstorming)
The other 4: splitting the remaining 10%

I was paying for 6 tools but really only needed 2.

What happened after I cancelled 4

Monthly cost: $200 → $40
Productivity: went UP, not down
The biggest gain wasn't the money — it was not having to think "which AI should I use for this?" every single time

When you only have 2 tools, you actually learn them properly. You build real workflows instead of jumping between 5 different interfaces.

I built a tool for this

I figured other solopreneurs probably have the same problem, so I built a free quiz: AI Stack Finder

5 questions, takes 2 minutes. It tells you which 2-3 AI tools you actually need based on your role and tasks, and how much you could save by cancelling the rest.

Tech stack: Next.js, Supabase, Vercel. The recommendation engine uses a greedy set-cover algorithm to find the minimum set of tools that covers all your tasks.

Would love to hear: how many AI subscriptions are you running right now? Have you done an audit like this?