Как работи RoundCut

Технически подробности за това как инструментите работят изцяло във вашия браузър — и как можете сами да го проверите.

Накратко

RoundCut изпълнява всеки инструмент в браузъра ви, използвайки два вградени API: HTML5 Canvas API за операции на пикселно ниво и WebAssembly за по-тежките задачи — кодиране/декодиране на формати на изображения и AI инференс. Нищо не се качва. Нищо не се обработва на нашите сървъри, защото нямаме сървъри, които да докосват вашите файлове.

Можете да го проверите за около 30 секунди: отворете DevTools на браузъра си, превключете на раздел Network, изчистете журнала и използвайте произволен инструмент. Единствените мрежови заявки, които ще видите, са за статичните ресурси на сайта — HTML, CSS, JavaScript, шрифтове и модулите WebAssembly. Снимката ви никога не напуска страницата.

Защо от страна на клиента

Повечето онлайн инструменти за изображения работят по обратния начин: качвате, сървър обработва, изтегляте резултата. Този модел има няколко добре известни недостатъка — вашият файл се съхранява на нечия друга машина, чакате двата пъти пренос, а операторът плаща за всяка CPU-секунда работа, затова тези услуги обичайно добавят акаунти, водни знаци или платени планове.

Браузърите са способни да изпълняват по-голямата част от тази работа нативно от години. Елементът <canvas> обработва изрязването, въртенето, преоразмеряването и повторното кодиране; WebAssembly ни позволява да изпълняваме същите C/Rust библиотеки MozJPEG, libwebp, libavif и Oxipng, които използва Squoosh, при почти нативна скорост. Когато пуснахме преработката от 2026 г., браузърът реално беше настигнал настолните инструменти за редактиране на изображения. Нямаше повече причина да включваме сървър.

Резултатът е стек с три взаимоусилващи се свойства: поверителност (файлът ви никога не напуска устройството ви), скорост (без качване, без опашка, без обиколка до сървъра) и разходи (обслужваме статични ресурси от CDN за стотинки на месец, независимо колко хора използват инструментите).

Конвейерът стъпка по стъпка

1. Избирате файл

Когато изберете изображение — чрез файловия избор, плъзгане и пускане или поставяне — браузърът предава на JavaScript обект File. JavaScript чете байтовете с API FileReader или Blob.arrayBuffer(). В никакъв момент от тази стъпка файлът не се изпраща по мрежата.

2. Браузърът декодира изображението

Съвременните браузъри могат нативно да декодират JPG, PNG, WebP, GIF, AVIF и (в Safari и скорошен Chromium) HEIC. Използваме createImageBitmap(), за да преобразуваме суровите байтове в битмап, с който GPU може да работи, извън основната нишка. За HEIC в браузъри, които не го декодират нативно, се прибягва до WebAssembly декодер, работещ локално в браузъра ви.

3. Инструментът върши работата си

Какво се случва след това зависи от инструмента. RoundCut предлага в момента три:

  • Circle Crop — пикселна трансформация Canvas 2D с кръгов clip path. Битмапът се рисува в <canvas> при избраното въртене и мащаб, прилага се кръговото изрязване, а вътрешността на кръга се прочита обратно като ImageData. Cropper.js управлява интерактивната рамка за изрязване.
  • Compress — повторно кодира JPG, PNG, WebP или AVIF с WebAssembly модули на jSquash (MozJPEG, libwebp, libavif, Oxipng). Това са същите upstream кодеци, използвани от Squoosh. Изпълняват се в Web Worker, за да остане UI отзивчив докато се кодира многомегапикселна снимка, а паралелен преглед ви позволява да видите компромиса преди потвърждение.
  • Remove Background — малък AI модел в ONNX формат (няколко MB, изтеглен веднъж и кеширан) работи в браузъра ви чрез ONNX Runtime Web с WebAssembly като изпълнителен бекенд. Първото изпълнение изтегля модела; всяко следващо е локално и моментално.

4. Изтегляте резултата

Изходният битмап се кодира в Blob, обвива се в object URL и се предлага на стандартния диалог за запис на браузъра ви. Където се поддържа, използваме File System Access API, за да можете директно да изберете целевата папка. Файлът се появява на диска ви; нищо не преминава през сървър.

Как да го проверите сами

Твърдението „без качване” е проверимо за две минути. Изберете какъвто от следните методи предпочитате:

Метод 1 — Наблюдавайте раздела Network

  1. Отворете RoundCut в нов раздел.
  2. Отворете DevTools (F12 или десен клик → Inspect) и преминете на раздел Network.
  3. Натиснете бутона „изчисти” в раздел Network, за да започнете от нулата.
  4. Използвайте произволен инструмент: заредете изображение, редактирайте го, изтеглете резултата.
  5. Прегледайте журнала на Network. Ще видите заявки за HTML, CSS, JS, шрифтове и (при първо използване на по-тежък инструмент) съответния WebAssembly модул. Няма да видите заявка, съдържаща байтовете на вашето изображение.

Колоната „Initiator” ви казва кой скрипт е инициирал всяка заявка, а колоната „Type” — какво е изпратено. Филтрирайте по „Fetch/XHR”, за да се фокусирате върху заявките за данни; ще видите, че всички са малки, всички са към статичния произход и никоя не съдържа файла ви.

Метод 2 — Използвайте инструментите без интернет

  1. Заредете произволна страница с инструмент на RoundCut. Използвайте я веднъж, за да се кешират съответните WebAssembly модули.
  2. Отворете DevTools, отидете на раздел Network и поставете отметка в Offline (или просто изключете Wi-Fi).
  3. Презаредете страницата. Тя пак се зарежда, защото браузърът е кеширал статичните ресурси.
  4. Използвайте инструмента отново от начало до край. Той все още работи.

Ако инструментът е работил офлайн, по дефиниция той не се е свързал със сървър по време на операцията. Това е най-силното възможно доказателство — работата е извършена на вашата машина, защото не е имало достъпна друга машина.

Какво виждаме ние

За да е ясно какво се събира: когато заредите страница, нашият доставчик на анализи (Cloudflare Web Analytics) записва, че даден браузър е заредил тази URL от дадена страна. Без бисквитки, без постоянни идентификатори, нищо обвързано с конкретен човек.

За инструменти, изтеглящи WebAssembly модул при първа употреба (jSquash кодеци, ONNX модела за премахване на фон), нашият хостинг доставчик вижда, че някой е изтеглил модула — по същия начин, по който вижда, че е изтеглен CSS файлът. Самият модул не съдържа никаква информация за вашето изображение.

Пълният инвентар на данните е в нашата политика за поверителност.

Технологичният стек

За любопитните — ето от какво е изграден RoundCut:

  • Astro — генераторът на статичен сайт. Всяка страница се доставя като чист HTML с прогресивно подобрени JavaScript „острови” само там, където живеят интерактивните инструменти.
  • Vanilla CSS с персонализирани свойства — без Tailwind, без CSS-in-JS. Пълната дизайн система е един единствен файл tokens.css.
  • jSquash — WebAssembly връзки към MozJPEG, libwebp, libavif и Oxipng за кодиране на изображения.
  • Cropper.js — слоят за взаимодействие с правоъгълника на изрязване за инструментите за кадриране.
  • ONNX Runtime Web — изпълнява модела за премахване на фон в браузъра ви чрез WebAssembly.
  • Cloudflare Pages — хоства статичния build, обслужва го от edge-а и осигурява DNS плюс защита от DDoS.
  • Cloudflare Web Analytics — агрегирано, без бисквитки преброяване на посещенията на страниците.

Поддръжка на браузъри

Всички инструменти работят на текущата и предишната версия на Chrome, Firefox, Safari и Edge — настолни и мобилни. Сайтът използва прогресивно подобряване: където браузърът поддържа по-нов API (напр. showSaveFilePicker, OffscreenCanvas), го използваме; където не поддържа, прибягваме до по-стария еквивалент. Няма стена „браузърът ви не се поддържа”.

Единственото твърдо изискване е JavaScript. С изключен JavaScript инструментите не могат да работят — няма резервен вариант от страна на сървъра, защото няма сървър, извършващ обработката на изображения.

Въпроси

Нещо, което не сме покрили? Пишете ни на support@araluma.com. Техническите въпроси са добре дошли.