Акысыз Сүрөт буруучу жана чагылдыруучу

Бул кантип иштейт

Айландыруу, каптал буруу жана бурч оңдоо бул жерде толугу менен HTML Canvas API колдонуп браузериңиздин ичинде болот — эч бир файл эч качан серверге жиберилбейт. Курал сүрөтүңүздү тандалган бурч жана масштаб трансформдору менен экран-сыртындагы canvas'ка тартат, андан кийин натыйжаны браузердин өз кодеки колдонуп JPEG, PNG же WebPге кодддойт.

1. 1
   Сүрөт жергиликтүү декодддолду

   JPEG, PNG же WebP файлыңыз жергиликтүү объект URL аркылуу HTMLImageElement'ке жүктөлөт — эч качан түзмөгүңүздөн чыкпаган браузер эс шилтемеси. Табигый пиксел өлчөмдөрү декодддолгон битмаптан түз окулат.
2. 2
   Canvas трансформу колдонулду

   Экран-сыртындагы canvas айландырылган чектегич кутучага туура келүү үчүн өлчөмдөлөт (ар бир ок үчүн туурасы·cos + бийиктик·sin). Canvas 2D контексти андан кийин борборго которулат, тандаган бурчка радианда айландырылат жана каптал буруу үчүн горизонталдык же вертикалдык окто -1гo масштабдалат — баары стандарттуу ctx.rotate / ctx.scale операциялары, тышкы китепканасыз.
3. 3
   Авто-кесүү бурчтарды кыркат (милдеттүү эмес)

   Так-эмес-бурчтук айландыруулар үчүн, кол менен жазылган геометрия функциясы — largestInnerRect — айландырылган чектегич кутучанын ичине батчу түпнуска пропорциянын эң чоң ок-туураланган төрт бурчтугун эсептейт, ошондуктан үч бурчтуу бош бурчтар сүрөттү бурмалабай алынат.
4. 4
   Браузер кодеки натыйжаны кодддойт

   canvas.toBlob() пиксел маалыматты браузердин курулма сүрөт кодировщигине берет, тандалуучу сапат жана тунук бурчтар үчүн фон толтуруу түсү менен JPEG, PNG же WebP Blob жаратып, аны түз жүктөп аласыз.

Байланыштуу куралдар