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

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

Чархиш, чаппакунӣ ва ислоҳи зовия дар ин ҷо пурра дар дохили браузери шумо бо API-и HTML Canvas кор мекунанд — ягон файл ҳаргиз ба сервер фиристода намешавад. Абзор тасвири шуморо ба canvas-и берун-аз-экран дар зовия ва табдилҳои миқёси интихобшуда мекашад, сипас натиҷаро ба JPEG, PNG ё WebP бо истифодаи кодеки худи браузер рамзгузорӣ мекунад.

1. 1
   Тасвир маҳаллӣ рамзкушоӣ карда мешавад

   Файли JPEG, PNG ё WebP-и шумо ба HTMLImageElement тавассути URL-и объекти маҳаллӣ — истиноди хотираи браузере ки ҳаргиз дастгоҳатонро тарк намекунад — бор карда мешавад. Андозаҳои табиии пиксел бевосита аз bitmap-и рамзкушоишуда хонда мешаванд.
2. 2
   Табдили canvas татбиқ мешавад

   Canvas-и берун-аз-экран ба андозае андозагирӣ мешавад, ки бо қуттии марзи чархзада мутобиқат кунад (бар·cos + баландӣ·sin барои ҳар меҳвар). Контексти Canvas 2D сипас ба марказ гузаронида, бо зовияи интихобшуда бо радиан чархзада, ва бо -1 дар меҳвари уфуқӣ ё амудӣ барои чаппакуниҳо миқёс карда мешавад — ҳама амалҳои стандартии ctx.rotate / ctx.scale бидуни китобхонаи берунӣ.
3. 3
   Худкор-буриш кунҷҳоро мебурад (ихтиёрӣ)

   Барои чархишҳои ғайри-кунҷи-рост, функсияи геометрии дастнавис — largestInnerRect — калонтарин росткунҷаи меҳвар-мутобиқи нисбати тарафҳои аслиро ҳисоб мекунад, ки дар дохили қуттии марзи чархзада ҷойгир аст, бинобар ин кунҷҳои холии секунҷа бидуни таҳрифи тасвир бартараф карда мешаванд.
4. 4
   Кодеки браузер натиҷаро рамзгузорӣ мекунад

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

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