Kırp

Resim kırpma Resmi daire şeklinde kırp

Optimize Et

Resim sıkıştırma Arka planı kaldır Görüntü büyütme

Düzenle

Resim boyutlandırma

Dönüştür

Diğer

JPG’yi PDF’ye dönüştür

RoundCut nasıl çalışır

Her aracın ne yaptığına, nerede çalıştığına ve bunu nasıl kendiniz doğrulayabileceğinize dair teknik ayrıntılar.

Kısa yanıt

RoundCut hibrit bir mimari kullanır: çoğu araç sıfır yüklemeyle tamamen tarayıcınızda çalışır, bir avuç araç ise tarayıcı kaliteyi yakalayamadığında kendi altyapımız üzerinden tek bir ağ isteği gönderir, her zaman görünmez bir istemci tarafı yedeğiyle. Hangi yolda olduğunuzu her araçta ve bu sayfada açıkça belirtiriz.

Aşağıdaki tablo temsilidir, kapsamlı değildir (yeni araçlar düzenli olarak yayınlanır). Her yol türünün bir örneğini gösterir:

Örnek araçİşin gerçekleştiği yer
Circle Crop (yalnızca tarayıcı)%100 tarayıcınızda, Canvas API. Yükleme yok, çevrimdışı çalışır.
Compress önizlemesi (yalnızca tarayıcı)%100 tarayıcınızda, canvas.toBlob. Yükleme yok. Kaydırıcı anında kalır.
Compress nihai indirme (sunucuya dokunan)api.roundcut.com.br adresindeki hizmetimize tek gidiş-dönüş (Almanya’daki bir VPS’te Fastify + sharp + libvips), tarayıcı yedeğiyle.
Arka Plan Kaldırma (sunucuya dokunan)Cloudflare’in uç GPU’larında BiRefNet çalıştıran bir Cloudflare Worker’ına tek gidiş-dönüş, buluta erişilemediğinde tarayıcınızda WebAssembly yedeğiyle.

Kırpma, yeniden boyutlandırma, format dönüştürme (AVIF kodlaması hariç) ve sıkıştırma önizlemesinin tümü tamamen tarayıcınızda çalışır. Arka plan kaldırma, sıkıştırma indirmesi, yapay zekayla büyütme, AVIF kodlama ve çok görselli PDF’in her biri tek bir isteği yönlendirir ve buluta erişilemediğinde tarayıcıya geri döner.

İstemci tarafı iddialarını yaklaşık 30 saniyede doğrulayabilirsiniz: DevTools → Network’ü açın, günlüğü temizleyin, ardından Circle Crop veya Compress önizleme kaydırıcısı gibi yalnızca tarayıcıda çalışan bir aracı kullanın, görüntü baytlarınızı taşıyan hiçbir isteğin sayfadan ayrılmadığını göreceksiniz. Sunucuya dokunan araçlar için ise işlem başına tam olarak bir yükleme göreceksiniz, adı belirtilmiş uç noktalara.

Neden hibrit

Çoğu çevrimiçi görüntü aracı iki uçtan birinde yer alır: her şeyi sunucuya yükleyin (gidiş-dönüşleri beklersiniz ve operatör dosyanızı saklar) ya da her şeyi tarayıcıda yapın (kodlama/yapay zeka adımlarında kalite ve hızdan fedakârlık edersiniz). Hiçbir uç her yerde kazanmaz.

Tarayıcıların zaten mükemmel olduğu alanlarda istemci tarafını seçtik, <canvas> öğesi kırpmayı, döndürmeyi, yeniden boyutlandırmayı ve JPG/WebP kayıplı önizleme kodlamasını yönetir, ve tarayıcının hâlâ ölçülebilir şekilde geride kaldığı alanlarda sunucu tarafını seçtik:

  • Görüntü sıkıştırma, nihai indirmede. Sunucu tarafı sharp + libvips 8.17, aynı görsel kalitede tarayıcı kodlayıcılara kıyasla bayt başına %10-15 daha küçük dosyalar üretir, ayrıca tarayıcının sunmadığı AVIF hız/kroma ayarlamasına ve JPEG XL çıktısına erişim sağlar. Kaydırıcı/önizleme tarayıcınızda çalışmaya devam eder, böylece yineleme anında kalır, yalnızca “İndir” tuşuna basmak hizmetimiz üzerinden geçer.
  • Yapay zeka arka plan kaldırma ve yapay zekayla büyütme, varsayılan yolda. Modeller (bölütleme için BiRefNet, büyütme için süper çözünürlük) saniyeler içinde tamamlanmak için gerçek bir GPU’ya ihtiyaç duyar. Tarayıcı içi yedekler çalışır, ancak daha yavaştır ve saç, kürk ve ince kenarlarda görsel olarak daha kaba bir sonuç üretir.
  • AVIF kodlama, dönüştürmede. Tarayıcı içi AVIF kodlayıcısı bazı cihazlarda yavaştır, bu nedenle AVIF çıktısı tek bir isteği sıkıştırma Worker’ına yönlendirir, ana iş parçacığında bir tarayıcı kodlaması yedeğiyle.

Bu yollarda sunucu tarafı olmanın kabul ettiğimiz bedeli, işlem başına bir gidiş-dönüştür. Her yerde istemci tarafında kalarak kaçındığımız bedel ise en hızlı yinelenen iş akışı bölümlerindeki gidiş-dönüş maliyetidir.

İşlem hattı, adım adım

1. Bir dosya seçiyorsunuz

Dosya seçici, sürükle-bırak veya yapıştırma yoluyla tarayıcı, JavaScript’e bir File nesnesi iletir. JavaScript baytları FileReader veya Blob.arrayBuffer() ile okur. Bu adımın hiçbir aşamasında dosya ağ üzerinden gönderilmez, kullandığınız araçtan bağımsız olarak.

2. Tarayıcı görüntüyü çözer

Modern tarayıcılar JPG, PNG, WebP, GIF ve AVIF’i yerel olarak çözer. Ham baytları, GPU’nun çalışabileceği bir bit eşleme dönüştürmek için ana iş parçacığı dışında createImageBitmap() kullanırız. HEIC’yi yerel olarak çözemeyen tarayıcılarda, tarayıcınızda yerel olarak çalışan bir WebAssembly kod çözücüye geçeriz.

3. Araç işini yapar, yolların ayrıldığı yer burasıdır

  • Yalnızca tarayıcıda çalışan araçlar (kırpma, yeniden boyutlandırma, PNG/JPEG/WebP’ye format dönüştürme, sıkıştırma önizlemesi). Bir Canvas 2D piksel dönüşümü ya da bir WebAssembly kodeği, bit eşlemi yerel olarak yeniden kodlar. Sonuç, herhangi bir yükleme olmadan hazırdır. Kırpma araçlarının etkileşimli kırpma çerçevesini Cropper.js yönetir, önizleme yeniden kodlamasını canvas.toBlob yapar. Tamamen tarayıcınızda.
  • Compress, indirme. “İndir”e dokunduğunuzda görüntü, api.roundcut.com.br’ye bir kez gönderilir (Hostinger tarafından işletilen Almanya’daki bir VPS’te çalışan bir Fastify hizmeti, Node 24 + sharp 0.34 + libvips 8.17, Squoosh’un sunucu yolunda kullandığı aynı C kitaplıkları). Önizlemede belirlediğiniz parametrelerle yeniden kodlanır ve baytlar tarayıcınıza akıtılır. Hizmet, kiracıya izole, içerik adresli bir önbellek tutar (girdi baytları + parametreler karması) ve 500 MB ile sınırlıdır, böylece aynı görüntüyü aynı ayarlarla yeniden indirmek önbellekteki baytları yeniden çalar, önbellek siz, IP veya dosya adıyla indekslenmez. Hizmet erişilemez olursa araç, tarayıcı içi önizleme blob’una döner.
  • Arka Plan Kaldırma, varsayılan bulut yolu. Görüntü, bir Cloudflare Worker’ına bir kez yüklenir, özel bir R2 paketinde hazırlanır, Cloudflare’in uç GPU’larında BiRefNet modelini çalıştıran cf.image.segment dönüşümü tarafından işlenir ve kesim akıtılarak geri gönderilir. Hazırlanan R2 nesnesi, sonuçtan bağımsız olarak bir R2 yaşam döngüsü kuralı aracılığıyla bir saat içinde silinir. Tipik bir fotoğraf 1-3 saniyede tamamlanır. Günlük IP başına ve 5 MB yükleme sınırları ücretsiz katmanı sürdürülebilir kılar.
  • Diğer bulut destekli araçlar (yapay zekayla büyütme, AVIF kodlama, çok görselli PDF) aynı şekli izler: adı belirtilmiş altyapıya tek bir istek (süper çözünürlük için bir bulut görsel API’si, AVIF kodlama için sıkıştırma Worker’ı, çok görselli PDF için VPS hizmetimiz), sonuç akıtılarak geri döner ve bu istek başarısız olursa şeffaf bir tarayıcı içi yedek.
  • WebAssembly yedeği. İlgili bulut yolu erişilemez durumdaysa (ağınız düşerse, katı bir güvenlik duvarının arkasındaysanız, günlük kota dolmuşsa veya dosya bulut sınırını aşıyorsa), araç şeffaf biçimde tarayıcınızda çalışan yerel bir modele ya da kodeğe geçer, örneğin ONNX Runtime Web aracılığıyla WebAssembly ile ISNet arka plan kaldırma modeli. İlk çalışmada model indirilir ve daha yavaştır, sonraki çalışmalar daha hızlıdır. Bu yedek yollarda yükleme yoktur, DevTools’ta doğrulayabilirsiniz.

4. Sonucu indiriyorsunuz

Çıktı bit eşlemi bir Blob’a kodlanır, bir object URL’ye sarılır ve tarayıcınızın standart dosya kaydetme iletişim kutusuna sunulur. Dosya diskinizde görünür.

Kendiniz nasıl doğrularsınız

Hangisini tercih ettiğinizi seçin:

Yöntem 1. Network sekmesini izleyin

  1. RoundCut’ı yeni bir sekmede açın ve DevTools → Network’ü açın.
  2. Yalnızca tarayıcıda çalışan bir aracı kullanın, Circle Crop veya Compress önizleme kaydırıcısı. Yalnızca HTML/CSS/JS/yazı tipleri ile ilk kullanımda ilgili WebAssembly modüllerine yönelik istekler görürsünüz. Hiçbir istek görüntü baytlarınızı taşımayacak.
  3. Şimdi sunucuya dokunan bir aracı kullanın, Compress → İndir veya Arka Plan Kaldırma. Görüntünüzü taşıyan tam olarak bir POST isteği göreceksiniz ve sonuçla birlikte geri gelen bir yanıt. Boyutu ve zamanlamayı görmek için herhangi bir isteğin üzerine gelin.

“Initiator” sütunu her isteği hangi betiğin tetiklediğini, “Type” sütunu ise ne gönderildiğini söyler. İkisini de gizlemiyoruz.

Yöntem 2. Araçları çevrimdışı kullanın

  1. Herhangi bir RoundCut araç sayfasını yükleyin. Tarayıcı içi ISNet modelinin önbelleklenmesi için Arka Plan Kaldırma’yı küçük bir görüntüyle bir kez kullanın.
  2. DevTools → Network → Çevrimdışı onay kutusunu işaretleyin (veya Wi-Fi’yı kapatın).
  3. Sayfayı yenileyin, statik varlıklar önbellekte olduğu için yine yüklenir.
  4. Araçları deneyin:
    • Yalnızca tarayıcıda çalışan araçlar (Circle Crop, yeniden boyutlandırma, Compress önizlemesi) çalışmaya devam eder, hiçbir zaman ağa ihtiyaç duymadılar.
    • Compress İndir, tarayıcı içi önizleme blob’una döner (biraz daha az verimli kodlama, ancak işlevsel).
    • Arka Plan Kaldırma, ISNet WebAssembly modeline döner ve giden istek olmadan çalışır.

Araçlar çevrimdışı çalıştıysa (bulut destekli olanlar hafifçe düşük kaliteli, yalnızca tarayıcıda çalışanlar aynı), tanım gereği hiçbir sunucu görüntünüzü görmedi.

Ne görüyoruz, ne görmüyoruz

İstemci tarafı yollarda görüntünüz hakkında hiçbir şey görmüyoruz. Bakmak için istek yok, depolamak için önbellek yok, grep’lenecek günlük satırı yok.

Sunucu tarafı yollarda:

  • Sıkıştırma ve PDF hizmeti, görüntü baytlarını kodlama süresince (genellikle birkaç yüz milisaniye) görür, önbellek TTL süresi boyunca içerik adresli bir önbellek girdisi tutar, hepsi bu. Önbellek kullanıcı, IP, dosya adı veya “sizin” görüntülerinizi bulmak için kullanabileceğimiz herhangi bir tanımlayıcıya göre indekslenmez. Görüntü içeriğini günlüğe almıyoruz. Kodlama hizmeti, geçiş öncesinde v1’in sunduğu aynı iki kiracı arasında paylaşılır, kiracıya özgü CORS, hız sınırları ve HMAC imzalı kanonik URL’lerle.
  • Arka Plan Kaldırma ve diğer yapay zeka yolları, görüntüyü hazırlama yüklemesi ve model çağrısı süresince (genellikle birkaç saniye) görür, ardından hazırlanan kopya bir R2 yaşam döngüsü kuralı tarafından silinir. BiRefNet modeli, remove.bg / fal.ai / Replicate tarzı harici bir API’da değil, Cloudflare’in kendi altyapısında çalışır.

Her yolda, analitik sağlayıcımız (Cloudflare Web Analytics) toplu sayfa görüntüleme verilerini kaydeder. URL, ülke, tarayıcı ailesi, Core Web Vitals. Çerez yok, kalıcı tanımlayıcı yok, bir kişiye bağlı hiçbir şey yok.

İlk kullanımda bir WebAssembly modülü indiren araçlar için (HEIC kod çözücü, ISNet ONNX modeli) barındırma sağlayıcımız birinin modülü aldığını görür, tıpkı CSS dosyasını aldığını görmesi gibi. Modülün kendisi görüntünüz hakkında hiçbir bilgi içermez.

Tam veri envanteri gizlilik politikamızda yer alır.

Teknoloji yığını

Merak edenler için:

  • Astro, statik site oluşturucu. Her sayfa, yalnızca etkileşimli araçların bulunduğu yerlerde aşamalı olarak iyileştirilmiş JavaScript “islands” ile düz HTML olarak sunulur.
  • Özel özelliklerle Vanilla CSS, Tailwind yok, CSS-in-JS yok. Tasarım sisteminin tamamı tek bir tokens.css dosyasıdır.
  • canvas.toBlob / <canvas>. Yalnızca tarayıcıda çalışan araçlarda JPEG, PNG, WebP, AVIF (tarayıcı destekli) kodlaması ve tüm kırpma ve yeniden boyutlandırma işleri.
  • Cropper.js, kırpma dikdörtgeni etkileşim katmanı.
  • ONNX Runtime Web, Arka Plan Kaldırma için ISNet WebAssembly yedeğini çalıştırır.
  • Cloudflare Pages, statik derlemeyi barındırır, uçtan sunar.
  • Cloudflare Workers + R2 + cf.image.segment (BiRefNet), varsayılan Arka Plan Kaldırma işlem hattı.
  • Fastify + sharp 0.34 + libvips 8.17, Node 24 üzerinde, Almanya’daki bir Hostinger VPS’inde api.roundcut.com.br adresindeki sıkıştırma ve PDF hizmeti.
  • Cloudflare Web Analytics, toplu, çerez içermeyen sayfa görüntüleme sayımı.

Tarayıcı desteği

Tüm araçlar Chrome, Firefox, Safari ve Edge’in geçerli ve önceki sürümlerinde, masaüstü ve mobilde çalışır. Site aşamalı geliştirme kullanır: tarayıcının daha yeni bir API’yi desteklediği yerde (ör. showSaveFilePicker, OffscreenCanvas) bunu kullanırız, desteklemediği yerde eski muadile geri döneriz. “Tarayıcınız desteklenmiyor” gibi bir engel yoktur.

Tek zorunlu gereksinimler JavaScript (her araç için) ve bir ağ bağlantısıdır (yalnızca varsayılan yolunda bulut destekli bir araç kullanırken, yalnızca tarayıcıda çalışan araçlar ilk sayfa yüklemesinin ardından tamamen çevrimdışı çalışır).

Sorular

Kapsamadığımız bir şey mi var? Bize e-posta gönderin: support@roundcut.app. Teknik sorular memnuniyetle karşılanır.