Kyauta Mai Juya & Juyar da Hoto

Yadda Yake Aiki

Juyawa, birkitawa, da gyaran kusurwa a nan suna gudana gaba ɗaya a cikin burauzarka ta amfani da HTML Canvas API — babu fayil da ake aikawa zuwa uwar garke. Kayan aikin yana zana hotonka zuwa wani canvas a wajen allo a zaɓaɓɓen kusurwa da sauye-sauyen girma, sannan yana ɓoye sakamakon zuwa JPEG, PNG, ko WebP ta amfani da codec na burauza da kansa.

1. 1
   An ɓoye hoto a wurin nan

   Ana loda fayil ɗinka na JPEG, PNG, ko WebP zuwa wani HTMLImageElement ta hanyar URL na abu na gida — ambaton ƙwaƙwalwar burauza wanda ba ya taɓa barin na'urarka ba. Ana karanta daidaitawar pixel na dabi'a kai tsaye daga bitmap da aka ɓoye.
2. 2
   An yi amfani da canjin canvas

   Ana girmata wani canvas a wajen allo don dacewa da akwatin da aka juya (fadi·cos + tsayi·sin ga kowane gefe). Sannan ana motsa yanayin Canvas 2D zuwa tsakiya, ana juya shi da zaɓaɓɓen kusurwa a radians, kuma ana ninka shi da -1 a gefen kwance ko tsaye don birkitawa — dukkan ayyukan ctx.rotate / ctx.scale na al'ada babu ɗakin karatu na waje.
3. 3
   Yankewa ta atomatik tana yanke kusurwoyi (na zaɓi)

   Don juyawa marasa kusurwa-dama, wani aikin geometry da aka rubuta da hannu — largestInnerRect — yana lissafta babbar murabba'i mai daidaita-gefe na rabon siffa na asali wanda yake dacewa a cikin akwatin da aka juya, don haka kusurwoyi masu fanko na triangular ana cire su ba tare da gurɓata hoton ba.
4. 4
   Codec na burauza yana ɓoye sakamakon

   canvas.toBlob() yana bayar da bayanan pixel ga mai ɓoye hoto na burauza da aka gina, yana samar da JPEG (tare da inganci da za a zaɓa da launin bango don kusurwoyi masu bayyane), PNG, ko Blob na WebP wanda kake sauke shi kai tsaye.

Kayan Aiki Masu Alaƙa