Neidio i'r prif gynnwys

Tociwr Delweddau am ddim

Tociwch ddelweddau gyda llusgo-i-ddewis, cyfyngiadau cymhareb agwedd ddewisol (1:1, 16:9, 4:3, ac ati), grid rheol-y-trydydd, ac allforio aml-fformat (JPEG, PNG, WebP).

Yn gweithio all-lein ar ôl llwytho

Gollyngwch ffeil yma, neu cliciwch i bori

JPG, PNG, WebP, HEIC, HEIF · wedi'i brosesu ar eich dyfais

neu pwyswch Ctrl+V i ludo o'ch clipfwrdd

Pori ffeiliau

Awgrym: gallwch ludo sgrinlun gyda Ctrl+V

Nid yw eich ffeiliau byth yn gadael eich dyfais. Mae'r holl brosesu yn digwydd yn lleol yn eich porwr.

Defnyddiau cyffredin

  • Cwtogi Lluniau ar gyfer InstagramCwtogi i ystumiau agwedd favored Instagram 1:1 (sgwâr), 4:5 (portread), a 1.91:1 (tir-iseledd).
  • Cwtogi Delweddau Proffil i SgwârGwnewch ddelweddau proffil sgwâr ar gyfer LinkedIn, Twitter, GitHub, neu unrhyw lwyfan cymdeithasol.
  • Cwtogi YouTube a Thysgluniau ErthyglCwtogi i'r gymhareb agwedd 16:9 a ddefnyddir gan fideos YouTube a'r rhan fwyaf o ddelweddau arwr blog.
  • Cwtogi Lluniau Pasbort / AdnabodCwtogi lluniau i gymhareb portread safonol 2:3 ar gyfer cais pasbort, fisa, ac adnabod.
  • Cwtogi Lluniau Cynhyrch E-FasnachSafoni cymarebau agwedd llun cynhyrch ar gyfer Amazon, Shopify, Etsy, a marchnadeedd eraill.

Sut Mae'n Gweithio

Mae torri'n digwydd yn gyfan gwbl yn eich porwr gan ddefnyddio HTML5 Canvas API — dim llwytho, dim gweinydd. Rydych yn llusgo ardal ddewis yn uniongyrchol ar elfen cynfas, a phan gymhwyswch y toriad, mae injan rendro 2D adeiledig y porwr yn darllen dim ond y picseli a ddewiswyd ac yn eu hailamgodio i JPEG, PNG, neu WebP.

  1. 1
    Delwedd wedi'i llwytho i gof
    Darllenir eich ffeil â URL.createObjectURL(), sy'n trosglwyddo URL blob lleol i'r porwr. Mae HTMLImageElement yn dadgodio'r ffeil yn gyfan gwbl yn y tab porwr — ni chaiff bytiau'r ddelwedd byth adael eich dyfais.
  2. 2
    Mae Pointer Events yn gyrru'r dewis toriad
    Mae Pointer Events API y porwr (sy'n uno mewnbwn llygoden, cyffwrdd, a phin) yn olrhain llusgo ar orosodiad cynfas. Mae gwasgu y tu allan i'r dewis yn dechrau petryal newydd; mae gwasgu tu mewn yn ei symud; mae gwasgu ger y gornel dde-isaf yn ei ailfeintio. Mae rhagosodiadau cymhareb-agwedd dewisol (1:1, 16:9, 4:3, ac ati) yn cyfyngu'r geometreg yn ystod llusgo.
  3. 3
    Mae Canvas yn tynnu'r rhagolwg byw
    Ar bob newid toriad, mae cyd-destun 2D y Canvas yn ailddarlunio'r ddelwedd, yn cymhwyso troshaen dywyll y tu allan i'r dewis, yn clirio'r ardal doriad i ddangos y ddelwedd wreiddiol mewn ffyddlondeb lawn, ac yn gorosod grid rheol-traeon a dolen ailfeintio gwyrddlas.
  4. 4
    Mae toBlob() yn amgodio ac yn danfon y canlyniad
    Pan gliciwch Torri, mae cynfas newydd oddi-ar-sgrin yn cael ei greu ym meintiau'r toriad union. Mae ctx.drawImage() yn copïo dim ond y petryal a ddewiswyd, ac mae canvas.toBlob() yn amgodio'r canlyniad gan ddefnyddio amgodydd JPEG, PNG, neu WebP brodorol y porwr ar eich gosodiad ansawdd dewisol. Trosglwyddir yr allbwn yn ôl fel URL blob lleol i'w lawrlwytho.

Mae eich delwedd yn cael ei hagor fel URL blob lleol a'i phrosesu'n gyfan gwbl o fewn eich tab porwr — ni chaiff dim ei lwytho i unrhyw weinydd ar unrhyw bwynt.

Offer Cysylltiedig

Cwestiynau Cyffredin