Тағйири андозаи тасвир-и ройгон

Чӣ тавр он кор мекунад

Тағйири андоза пурра дар браузери шумо бо истифодаи API-и Canvas — ҳамон муҳаррики тасвиркунӣ ки ба Chrome, Firefox ва Safari сохта шудааст — рух медиҳад. Тасвири шумо ба canvas-и берун-аз-экран дар андозаи нав кашида ва маҳаллӣ аз нав рамзгузорӣ мешавад; ҳеҷ чиз дастгоҳатонро тарк намекунад.

1. 1
   Тасвир аз ҷониби браузер рамзкушоӣ карда мешавад

   Вақте файлеро мепартоед ё интихоб мекунед, браузер тасвирро (JPEG, PNG, WebP, AVIF ё GIF) ба маълумоти хоми пиксел тавассути HTMLImageElement рамзкушоӣ мекунад. Андозаҳои аслии пиксел хонда шуда, барои пур кардани пешакии майдонҳои бар ва баландӣ истифода мешаванд.
2. 2
   Canvas дар андозаи нав аз нав мекашад

   Зер кардани Тағйири андоза HTMLCanvasElement-и берун-аз-экранро ба бар ва баландии интихобии шумо гузошта, сипас ctx.drawImage()-ро даъват мекунад, то ҳар пикселро ба андозаҳои нав миқёс ва рангубор кунад. Барои натиҷаи JPEG, пуркунии заминаи сафед аввал татбиқ мешавад, то минтақаҳои шаффоф сиёҳ нашаванд.
3. 3
   canvas.toBlob() натиҷаро рамзгузорӣ мекунад

   Усули дарунсохти canvas.toBlob()-и браузер маълумоти пикселро ба JPEG, PNG ё WebP дар сатҳи сифати гузоштаатон рамзгузорӣ мекунад. Агар андозаи файли ҳадафро мушаххас карда бошед, ҷустуҷӯи дуиии 7-такрора худкор параметри сифатро танзим мекунад, то натиҷа ба он андоза ё поёнтар афтад.
4. 4
   Натиҷа маҳаллӣ пешнамоиш ва боргирӣ карда мешавад

   Blob-и рамзгузоришуда ба URL-и объект барои панели пешнамоиш табдил дода мешавад — бидуни давраи сервер. Зер кардани боргирӣ захираи маҳаллиро бо номи файле ки андозаҳои ниҳоии пикселро дар бар мегирад, фаъол мекунад.

Абзорҳои марбут