Lumaktaw sa pangunahing nilalaman

Libreng Pang-crop ng Larawan

Mag-crop ng mga larawan gamit ang drag-to-select, opsyonal na mga constraint ng aspect ratio (1:1, 16:9, 4:3, atbp.), rule-of-thirds grid, at multi-format na export (JPEG, PNG, WebP).

Gumagana offline kapag na-load na

I-drop ang file dito, o mag-click para mag-browse

JPG, PNG, WebP, HEIC, HEIF · pinoproseso sa iyong device

o pindutin ang Ctrl+V para i-paste mula sa clipboard

I-browse ang mga file

Tip: puwede kang mag-paste ng screenshot gamit ang Ctrl+V

Ang iyong mga file ay hindi kailanman lumalabas sa iyong device. Lahat ng pagproseso ay nangyayari nang lokal sa iyong browser.

Mga karaniwang gamit

  • Mag-crop ng Photos para sa InstagramMag-crop sa Instagram's preferred 1:1 (square), 4:5 (portrait), at 1.91:1 (landscape) aspect ratios.
  • Mag-crop ng Profile Pictures sa SquareGumawa ng square profile pictures para sa LinkedIn, Twitter, GitHub, o kahit anong social platform.
  • Mag-crop ng YouTube at Article ThumbnailsMag-crop sa 16:9 aspect ratio na ginagamit ng YouTube videos at karamihan ng blog hero images.
  • Mag-crop ng Passport / ID PhotosMag-crop ng photos sa standard 2:3 portrait ratio para sa passport, visa, at ID applications.
  • Mag-crop ng E-Commerce Product PhotosI-standardize ang product photo aspect ratios para sa Amazon, Shopify, Etsy, at iba pang marketplaces.

Paano ito Gumagana

Buong nangyayari sa iyong browser ang pag-crop gamit ang HTML5 Canvas API — walang upload, walang server. Nagda-drag ka ng selection region direkta sa isang canvas element, at kapag in-apply mo ang crop, binabasa ng built-in na 2D rendering engine ng browser ang mga napiling pixel lang at nire-re-encode sa JPEG, PNG, o WebP.

  1. 1
    Nilo-load sa memory ang larawan
    Binabasa ang file mo gamit ang URL.createObjectURL(), na nagbibigay sa browser ng lokal na blob URL. Dine-decode ng isang HTMLImageElement ang file nang buo sa tab ng browser — hindi kailanman umaalis sa device mo ang mga byte ng larawan.
  2. 2
    Pinapatakbo ng Pointer Events ang crop selection
    Sinusubaybayan ng Pointer Events API ng browser (na pinag-iisa ang input ng mouse, touch, at pen) ang pag-drag sa isang canvas overlay. Kapag pumindot sa labas ng selection, nagsisimula ng bagong parihaba; sa loob, inililipat ito; malapit sa kanang-ibabang sulok, nire-resize ito. Nililimitahan ng mga opsyonal na aspect-ratio preset (1:1, 16:9, 4:3, atbp.) ang geometry habang nagda-drag.
  3. 3
    Iginuguhit ng Canvas ang live preview
    Sa bawat pagbabago ng crop, iginuguhit ulit ng Canvas 2D context ang larawan, nilalagyan ng madilim na overlay sa labas ng selection, nililinis ang crop region para ipakita ang orihinal na larawan sa buong kalidad, at nagpapatong ng rule-of-thirds na grid at teal na resize handle.
  4. 4
    Ine-encode at inihahatid ng toBlob() ang resulta
    Kapag nag-click ka sa Crop, gumagawa ng bagong off-screen na canvas sa eksaktong sukat ng crop. Kinokopya ng ctx.drawImage() ang napiling parihaba lang, at ine-encode ng canvas.toBlob() ang resulta gamit ang native na JPEG, PNG, o WebP encoder ng browser sa napili mong kalidad. Ibinabalik ang output bilang lokal na blob URL para i-download.

Binubuksan ang larawan mo bilang lokal na blob URL at pinoproseso nang buo sa loob ng tab ng iyong browser — walang ina-upload sa anumang server kahit kailan.

Mga Kaugnay na Tool

Mga Madalas na Itanong