Siirry pääsisältöön

Kuvanleikkuri ilmaiseksi

Rajaa kuvia vetämällä valitaksesi, valinnaisilla kuvasuhderajoituksilla (1:1, 16:9, 4:3 jne.), kolmanneksien säännön ruudukolla ja moniformaattiviennillä (JPEG, PNG, WebP).

Toimii offline-tilassa kerran ladattuna

Pudota tiedosto tähän tai valitse napsauttamalla

JPG, PNG, WebP, HEIC, HEIF · käsitellään laitteellasi

tai liitä leikepöydältä painamalla Ctrl+V

Selaa tiedostoja

Vinkki: voit liittää kuvakaappauksen näppäimillä Ctrl+V

Tiedostosi eivät koskaan poistu laitteeltasi. Kaikki käsittely tapahtuu paikallisesti selaimessasi.

Yleiset käyttötavat

  • Rajaa valokuvat InstagramilleRajaa Instagramin ensisijaisiin kuvasuhteihin: 1:1 (neliö), 4:5 (pystysuunta) ja 1.91:1 (vaakasuunta).
  • Rajaa profiilikuvat neliöksiLuo neliöprofiilipalkit LinkedInille, Twitterille, GitHubille tai mille tahansa sosiaalisen median alustalle.
  • Rajaa YouTube- ja artikkelien pienoiskuvatRajaa 16:9-kuvasuhteeseen, jota YouTube-videot ja useimmat blogi-pääkuvat käyttävät.
  • Rajaa passi-/ID-valokuvatRajaa valokuvat vakiintuneiden 2:3 pystysuunnin kuvasuhteeseen passi-, viisumi- ja ID-hakemuksille.
  • Rajaa e-kaupan tuotevalokuvatStandardisoi tuotevalokuvan kuvasuhteet Amazonille, Shopifylle, Etsy-palvelulle ja muille markkinapaikoille.

Miten se toimii

Rajaus tapahtuu kokonaan selaimessasi HTML5 Canvas -rajapinnalla — ei latausta, ei palvelinta. Vedät valinta-alueen suoraan kanvaselementtiin, ja kun sovellat rajauksen, selaimen sisäänrakennettu 2D-piirtomoottori lukee vain valitut pikselit ja koodaa ne uudelleen JPEG-, PNG- tai WebP-muotoon.

  1. 1
    Kuva ladattu muistiin
    Tiedostosi luetaan URL.createObjectURL()-funktiolla, joka antaa selaimelle paikallisen blob-URL:n. HTMLImageElement purkaa tiedoston kokonaan selainvälilehdessä — kuvan tavut eivät koskaan poistu laitteeltasi.
  2. 2
    Pointer Events ohjaa rajausvalintaa
    Selaimen Pointer Events -rajapinta (joka yhdistää hiiri-, kosketus- ja kynäsyötteen) seuraa vetämisiä kanvaspeitteessä. Painaminen valinnan ulkopuolella aloittaa uuden suorakulmion; painaminen sisällä siirtää sitä; painaminen lähellä oikeaa alakulmaa muuttaa sen kokoa. Valinnaiset kuvasuhde-esiasetukset (1:1, 16:9, 4:3 jne.) rajoittavat geometriaa vetämisen aikana.
  3. 3
    Canvas piirtää suoran esikatselun
    Jokaisella rajausmuutoksella Canvas 2D -konteksti piirtää kuvan uudelleen, soveltaa tumman peittokerroksen valinnan ulkopuolelle, tyhjentää rajausalueen näyttämään alkuperäisen kuvan täydellä tarkkuudella, ja peittää sen kolmasosien säännön ruudukolla ja sinivihreällä koon muutoskahvalla.
  4. 4
    toBlob() koodaa ja toimittaa tuloksen
    Kun napsautat Rajaa, uusi näytön ulkopuolinen kanvas luodaan tarkoilla rajausmitoilla. ctx.drawImage() kopioi vain valitun suorakulmion, ja canvas.toBlob() koodaa tuloksen käyttäen selaimen natiivia JPEG-, PNG- tai WebP-koodainta valitsemallasi laatuasetuksella. Tuloste annetaan takaisin paikallisena blob-URL:na latausta varten.

Kuvasi avataan paikallisena blob-URL:na ja käsitellään kokonaan selainvälilehdessäsi — mitään ei ladata millekään palvelimelle missään vaiheessa.

Liittyvät työkalut

Usein kysytyt kysymykset