GoogleChromeLabs/squoosh

Trim transparent pixels

Open

#1 070 ouverte le 23 juin 2021

Voir sur GitHub
 (3 commentaires) (1 réaction) (0 assignés)TypeScript (20 335 stars) (1 431 forks)batch import
UIcodechelp wanted

Description

Is your feature request related to a problem? Please describe.

When I receive product shots from the design team they often contain lots of whitespace in the form of transparent pixels around the item. I need a way to remove that transparency and change the image dimensions to fit the actual content of the image.

Describe the solution you'd like

Trim transparent pixels around the content of the image. Similar to the Image > Trim... > Transparent Pixels feature in Photoshop.

Does other service/app have this feature?

Yes, see https://www.photopea.com/

Additional context

Guide contributeur

Stack technique
typescripthtmlcssnodejs
Domaine
frontend
Type d'issue
feature
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
half day
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
fresh
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
basic image processing conceptsCanvas APITypeScript
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
65
Direction de recherche
Examine existing image processing operations in the `src/features` or `src/codecs` directory (e.g., resize, rotate) to understand the pattern. Locate the UI components for image editing, likely in `src/components/`. Implement a trim function that scans pixel data from edges inward to find the bounding box of non transparent pixels, then crops the image accordingly. Add a UI control, such as a button in the editor panel, to trigger the trim. Follow the existing code structure for consistency. Check the issue comments for any additional guidance from maintainers.