angularjs - TypeScript veya JavaScript'te resimleri filtrele

Bir web uygulamasında kullanıcı verilerini almak için bir form yapıyorum, bu formda bir input file ile avatar ekleyebiliyorum. Bu dosya, resim uzantılı dosyaları filtreliyor, ama endişem, bir script dosyası oluşturup örneğin ona bir .jpg uzantısı verebilir miyim.

Analiz edebileceğim görüntü

const reader = new FileReader();
    reader.onload = (event: any) => {
      console.log(event);
      this.avatarUrl = event.target.result;
      console.log(this.avatarUrl);
    };
    reader.readAsDataURL(this.avatarSelected);

ama gerçek görüntüleri ve gizli scriptleri ayırt edecek hiçbir şey bulamıyorum.

Cevaplar için teşekkürler.

Cevap #1

Anladığım kadarıyla: bir dosyanın resim olup olmadığını tespit etmek istiyorsunuz.

Özellikle script.js dosyasının script.jpg olarak yeniden adlandırıldığı bir durumda, bunu resim OLMADIĞI olarak tespit etmek istersiniz.

Yaklaşım şudur:

1. bir resim öğesi oluştur.
2. yükle
3. hata durumunda reddet/başarı durumunda çöz

4. zaman aşımı ekle: eğer X saniye sonra yüklenmezse, yüklemeyi durdurmak için URL'yi sahte bir URL ile değiştir.

   function testImage(url) {
   
       return new Promise((resolve, reject) => {
         let timer;
         const image = new Image();
         image.onerror = image.onabort = () => {
             clearTimeout(timer);
             reject("error");
         };
         image.onload = function() {
              clearTimeout(timer);
              resolve("success");
          };
          timer = setTimeout(function() {
             img.src = "fakeUrl"; // stop loading
             reject("timeout");
          }, 3000); 
          img.src = url;
       });
   }