Kyauta Mai Yanke Hoto

Yanke hotuna ta jan-don-zaɓa, iyakokin aspect ratio na zaɓi (1:1, 16:9, 4:3, da dai sauransu), grid na rule-of-thirds, da fitarwa a nau'ikan da yawa (JPEG, PNG, WebP).

Yana aiki babu haɗi da zarar an loda shi

Jefa fayiloli a nan, ko danna don bincika

JPG, PNG, WebP, HEIC, HEIF · Babu iyakar girman fayil

ko danna Ctrl+V don manna daga clipboard ɗinka

Bincika fayiloli

Shawara: kuna iya manna hoton allo tare da Ctrl+V

Fayilolin ku ba za su bar na'urar ku ba. Duk sarrafa yana faruwa a cikin burauzar ku.

Yadda Yake Aiki

Yankewa tana faruwa gaba ɗaya a burauzarka ta amfani da HTML5 Canvas API — babu lodawa, babu uwar garke. Kana jan wani yanki na zaɓi kai tsaye a kan wani abu na canvas, kuma lokacin da ka yi amfani da yankewar, injin zanawa na 2D na burauza da aka gina yana karanta pixels da aka zaɓa kawai kuma yana sake ɓoye su zuwa JPEG, PNG, ko WebP.

  1. 1
    An loda hoto zuwa ƙwaƙwalwa
    Ana karanta fayil ɗinka da URL.createObjectURL(), wanda yake bai wa burauza wani URL na blob na gida. Wani HTMLImageElement yana ɓoye fayil ɗin gaba ɗaya a tab ɗin burauza — bytes na hoton ba su taɓa barin na'urarka ba.
  2. 2
    Pointer Events yana tuka zaɓen yankewa
    Pointer Events API na burauza (wanda yake haɗa shigarwar linzami, taɓawa, da alkalami) yana bin diddigin jawo a kan wani canvas overlay. Danna wajen zaɓin yana fara wani sabon murabba'i; danna cikinsa yana motsa shi; danna kusa da kusurwar ƙasa-dama yana sake girmata shi. Zaɓin sigogi na rabo-siffa na zaɓi (1:1, 16:9, 4:3, da sauransu) suna daure siffar yayin jawo.
  3. 3
    Canvas yana zana dubawa mai rai
    A kowane canjin yankewa, yanayin Canvas 2D yana sake zana hoton, yana amfani da wani overlay duhu wajen zaɓin, yana share yankin yankewa don nuna ainihin hoton a cikakken inganci, kuma yana lulluɓe grid na dokar-kashi-uku da wani mai riƙawa na sake-girma na teal.
  4. 4
    toBlob() yana ɓoyewa kuma yana bayar da sakamako
    Lokacin da ka danna Yanke, ana ƙirƙirar wani sabon canvas a wajen allo a ainihin girman yankewa. ctx.drawImage() yana kwafin murabba'in da aka zaɓa kawai, kuma canvas.toBlob() yana ɓoye sakamakon ta amfani da mai ɓoyewa na JPEG, PNG, ko WebP na asali na burauza a saitin inganci da ka zaɓa. Ana bayar da fitarwar baya a matsayin URL na blob na gida don saukewa.

Ana buɗe hotonka a matsayin URL na blob na gida kuma ana sarrafa shi gaba ɗaya a cikin tab ɗin burauzarka — babu wani da ake loda shi zuwa kowace uwar garke a kowane lokaci.

Kayan Aiki Masu Alaƙa

Tambayoyin Da Ake Yi Sau Da Dama