client-side image resizing

Vue CLI-də şəklin istifadəçi tərəfdə ölçüsünün dəyişdirilməsi

Adətən serverə şəkil yükləmək üçün istifadə olunan formalarda, xüsusən də mobil qurğu istifadəçilərinin qarşılaşdığı bir çətinlik var. Məsələn, telefonla şəkli çəkib forma vasitəsilə serverə göndərəndə şəklin ölçüsü serverin konfiqurasiyasında qeyd edilmiş maksimal post həcmini aşır. Nəticədə faylı emal edəcək proqrama şəkil çatmır və istifadəçiyə "Fayl yüklənmədi" məlumatı çıxarılır.

Bu məsələnin bir neçə həll üsulu var. Ən rahat ancaq hər dəfə tətbiq edilə bilinməyən üsul maksimal post həcmini artırmaqdır. Bu üsul həmişə düzgün həll deyil. Belə ki, çox vaxt şəklin həcminin o qədər böyük olması həm serverin yaddaşında yer həm də emal müddəti baxımından sərf etmir, həm də adətən çox keyfiyyətli şəklə də ehtiyac olmur.

Digər həll hal-hazırda HTML5-in imkanı vasitəsilə şəklin istifadəçi tərəfdə ölçüsünün dəyişdirilməsi, keyfiyyətinin azaldılmasıdır.

Vue CLI vasitəsilə deyilən sonuncu üsulun həllini aşağıdakı kimi etmək mümkündür.

Bu həll məhz Vue CLI-dən asılı deyil və asanlıqla ad JavaScript-ə çevirilib məsələn JQuery vasitəsilə də istifadə edilə bilər. Funksiyaya mütləq parametr olaraq HTML file input-un dəyəri ötürülməlidir.

Leave a Reply