G\u00fcn\u00fcm\u00fcz web d\u00fcnyas\u0131nda g\u00f6rseller, kullan\u0131c\u0131 deneyiminin vazge\u00e7ilmez bir par\u00e7as\u0131. Ancak y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve optimize edilmemi\u015f resimler, web sitelerinin y\u00fcklenme s\u00fcrelerini ciddi \u015fekilde uzatarak hem kullan\u0131c\u0131lar\u0131 hem de arama motorlar\u0131n\u0131 olumsuz etkileyebilir. Bu soruna \u00e7\u00f6z\u00fcm olarak geli\u015ftirilen online resim s\u0131k\u0131\u015ft\u0131r\u0131c\u0131lar yayg\u0131n olsa da, \u00e7o\u011fu zaman kullan\u0131c\u0131 verilerini sunucular\u0131na y\u00fckleyerek gizlilik endi\u015felerine yol a\u00e7ar. \u0130\u015fte tam da bu noktada, taray\u0131c\u0131da %100 \u00e7al\u0131\u015fan ve gizlili\u011fi \u00f6n planda tutan bir resim s\u0131k\u0131\u015ft\u0131r\u0131c\u0131ya olan ihtiyac\u0131 fark ettim ve bu makalede, bu projenin teknik detaylar\u0131n\u0131, mimarisini ve geli\u015ftirme s\u00fcrecini sizlerle payla\u015faca\u011f\u0131m.<\/p>\n
Online resim s\u0131k\u0131\u015ft\u0131rma ara\u00e7lar\u0131, genellikle g\u00f6rsellerinizi sunucular\u0131na y\u00fckler, i\u015fler ve optimize edilmi\u015f hallerini size geri sunar. Bu s\u00fcre\u00e7, baz\u0131 kullan\u0131c\u0131lar i\u00e7in veri gizlili\u011fi ve g\u00fcvenlik a\u00e7\u0131s\u0131ndan soru i\u015faretleri bar\u0131nd\u0131r\u0131r. Geli\u015ftirdi\u011fim \u00e7\u00f6z\u00fcm, bu endi\u015feleri ortadan kald\u0131rmay\u0131 hedeflerken, ayn\u0131 zamanda kullan\u0131c\u0131ya y\u00fcksek performans ve kontrol sunmay\u0131 ama\u00e7lar.<\/p>\n
Piyasada bulunan bir\u00e7ok pop\u00fcler resim s\u0131k\u0131\u015ft\u0131r\u0131c\u0131, g\u00f6rselleri bulut tabanl\u0131 sunucularda i\u015fler. Bu durum, \u00f6zellikle hassas veya ki\u015fisel veriler i\u00e7eren resimler i\u00e7in potansiyel bir risk olu\u015fturur. Y\u00fckleme ve indirme s\u00fcreleri, internet ba\u011flant\u0131s\u0131n\u0131n kalitesine ba\u011fl\u0131 olarak de\u011fi\u015febilir ve b\u00fcy\u00fck dosyalar i\u00e7in zaman al\u0131c\u0131 olabilir. Ayr\u0131ca, baz\u0131 ara\u00e7lar \u00fccretsiz kullan\u0131m limitleri veya abonelik modelleriyle gelir.<\/p>\n
Resimlerin sunuculara y\u00fcklenmesi, \u00fc\u00e7\u00fcnc\u00fc taraf\u0131n bu verilere eri\u015fim potansiyeli ta\u015f\u0131d\u0131\u011f\u0131 anlam\u0131na gelir. \u015eirketlerin gizlilik politikalar\u0131 ne olursa olsun, bir veri ihlali veya k\u00f6t\u00fcye kullan\u0131m riski her zaman mevcuttur. Kullan\u0131c\u0131lar, ki\u015fisel foto\u011fraflar\u0131n\u0131, kimlik belgelerini veya ticari s\u0131rlar\u0131 i\u00e7eren g\u00f6rselleri s\u0131k\u0131\u015ft\u0131r\u0131rken bu riskleri almak istemezler.<\/p>\n
Taray\u0131c\u0131 tabanl\u0131 bir \u00e7\u00f6z\u00fcm, kullan\u0131c\u0131n\u0131n verileri \u00fczerinde tam kontrol sahibi olmas\u0131n\u0131 sa\u011flar. Resimler asla kullan\u0131c\u0131n\u0131n cihaz\u0131ndan ayr\u0131lmaz, bu da gizlilik ve g\u00fcvenlik a\u00e7\u0131s\u0131ndan en \u00fcst d\u00fczeyde g\u00fcvence anlam\u0131na gelir. Ayr\u0131ca, internet ba\u011flant\u0131s\u0131 olmadan bile (ilk y\u00fcklemeden sonra) \u00e7al\u0131\u015fabilme potansiyeli sunar, bu da eri\u015filebilirli\u011fi art\u0131r\u0131r.<\/p>\n
Bu t\u00fcr bir uygulaman\u0131n tamamen taray\u0131c\u0131 i\u00e7inde \u00e7al\u0131\u015fabilmesi, modern web teknolojilerinin geldi\u011fi noktay\u0131 g\u00f6zler \u00f6n\u00fcne seriyor. JavaScript, Canvas API ve Web Workers gibi ara\u00e7lar, karma\u015f\u0131k resim i\u015fleme g\u00f6revlerini istemci taraf\u0131nda, etkili bir \u015fekilde ger\u00e7ekle\u015ftirmemizi sa\u011fl\u0131yor.<\/p>\n
JavaScript, uygulaman\u0131n ana dilidir. Ancak resim s\u0131k\u0131\u015ft\u0131rma gibi yo\u011fun i\u015flem gerektiren g\u00f6revler, ana UI i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke ederek taray\u0131c\u0131n\u0131n donmas\u0131na neden olabilir. Bu sorunu a\u015fmak i\u00e7in Web Workers devreye girer. Web Workers, JavaScript kodunu ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ayr\u0131, arka planda \u00e7al\u0131\u015fan bir i\u015f par\u00e7ac\u0131\u011f\u0131nda y\u00fcr\u00fctmemizi sa\u011flar. Bu sayede, resim s\u0131k\u0131\u015ft\u0131rma i\u015flemi devam ederken kullan\u0131c\u0131 aray\u00fcz\u00fc ak\u0131c\u0131 kal\u0131r ve kullan\u0131c\u0131 di\u011fer i\u015flemlerini yapmaya devam edebilir.<\/p>\n
\/\/ main.js\nconst worker = new Worker('compress-worker.js');\n\nworker.onmessage = (e) => {\n const compressedBlob = e.data;\n \/\/ S\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f resmi indir veya \u00f6nizle\n};\n\ndocument.getElementById('fileInput').addEventListener('change', (event) => {\n const file = event.target.files[0];\n if (file) {\n worker.postMessage(file); \/\/ Dosyay\u0131 Web Worker'a g\u00f6nder\n }\n});\n\n\/\/ compress-worker.js\nself.onmessage = async (e) => {\n const file = e.data;\n \/\/ Resim s\u0131k\u0131\u015ft\u0131rma mant\u0131\u011f\u0131 burada \u00e7al\u0131\u015f\u0131r\n const compressedBlob = await compressImage(file);\n self.postMessage(compressedBlob);\n};<\/pre>\n<\/code><\/p>\n
Canvas API ve Resim \u0130\u015fleme<\/h4>\n
HTML5 Canvas API, taray\u0131c\u0131da piksel tabanl\u0131 resim manip\u00fclasyonu i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Y\u00fcklenen bir resmi bir