Pulsuz Şəkil Kəsici

Necə İşləyir

Kəsmə tamamilə brauzerinizdə HTML5 Canvas API istifadə edərək baş verir — yükləmə yoxdur, server yoxdur. Bir kanvas elementinin üzərində birbaşa bir seçim bölgəsi sürükləyirsiniz, kəsməni tətbiq etdiyinizdə isə brauzerin daxili 2D render mühərriki yalnız seçilmiş pikselləri oxuyur və onları JPEG, PNG, ya da WebP-ə yenidən kodlaşdırır.

1. 1
   Şəkil yaddaşa yükləndi

   Faylınız brauzerə lokal bir blob URL-i verən URL.createObjectURL() ilə oxunur. Bir HTMLImageElement faylı tamamilə brauzer sekmesində dekodlayır — şəkil baytları heç vaxt cihazınızı tərk etmir.
2. 2
   Pointer Events kəsmə seçimini idarə edir

   Brauzerin Pointer Events API-si (siçan, toxunma və qələm girişini birləşdirən) bir kanvas üst-qatında sürükləmələri izləyir. Seçimin xaricinə basmaq yeni bir düzbucaqlı başladır; daxilinə basmaq onu hərəkət etdirir; aşağı-sağ küncə yaxın basmaq onu yenidən ölçür. İsteğe bağlı ekran-nisbəti hazır ayarları (1:1, 16:9, 4:3 və s.) sürükləmə zamanı həndəsəni məhdudlaşdırır.
3. 3
   Canvas canlı önizləməni çəkir

   Hər kəsmə dəyişikliyində, Canvas 2D konteksti şəkli yenidən çəkir, seçimin xaricinə tünd bir üst-qat tətbiq edir, orijinal şəkli tam sadiqliklə göstərmək üçün kəsmə bölgəsini təmizləyir və üçdə-bir qaydası torunu və firuzəyi bir yenidən-ölçmə tutacağını üst-üstə qoyur.
4. 4
   toBlob() nəticəni kodlaşdırır və çatdırır

   Kəs düyməsinə kliklədiyinizdə, dəqiq kəsmə ölçülərində yeni bir ekrandan-kənar kanvas yaradılır. ctx.drawImage() yalnız seçilmiş düzbucaqlını kopyalayır, canvas.toBlob() isə nəticəni seçdiyiniz keyfiyyət ayarında brauzerin doğma JPEG, PNG, ya da WebP kodlayıcısı istifadə edərək kodlaşdırır. Çıxış endirmə üçün lokal bir blob URL-i kimi geri verilir.

Əlaqəli Alətlər