URLに画像の拡張子が含まれていないリモート画像URLから画像の拡張子を取得する方法

Question

Image APIを使用して画像URLの画像データ/拡張子を取得しようとしています。私はdataUrlを取得しようとしていますhttp://placekitten.com/g/1000/1000

：ように私は簡単に画像のURLの{ドメイン} .COM /パスツーimage.jpgが、何についてのような名前のファイル拡張子に正規表現を使用することができます

その場所にある画像データに対して これは、このデータが必要なコードの特定の部分です。現在、私は 'image/png'をハードコーディングしています。

_getDataUri(url, callback) { 
    const props = this.props; 
    const img = new Image(); 
    img.setAttribute('crossOrigin', 'anonymous'); 

    img.onload = function onLoadedImage() { 
     const {minHeight, minWidth} = props.opt; 
     const [width, height] = [img.width, img.height]; 

     const canvas = document.createElement('canvas'); 
     canvas.width = this.width; 
     canvas.height = this.height; 

     const ctx = canvas.getContext('2d'); 
     ctx.drawImage(this, 0, 0); 

     const dataUrl = canvas.toDataURL('image/png'); 
     callback({ 
     dataUrl, 
     height, 
     minHeight, 
     minWidth, 
     width 
     }); 
    }; 

    img.onerror = function onImageError() { 
     props.opt.onModalClose(); 
     props.opt.onChangeCardStatus('invalidImage'); 
    }; 

    img.src = url; 
    } 

*更新* あなたはCORSを無効にした場合、それが読める応答を生成しませんので、APIがこの問題を解決することはできません取得します。

Answer 1

あなたは画像が `アクセス制御 - 許可 - Origin`ヘッダーを添えされていない場合、あなたは成功し、エラーなし`） `canvas.toDataURL（呼び出すにはどうすればよいfetch()、Response.blob()、FileReader.prototype.readAsDataURL()

fetch("http://placekitten.com/g/1000/1000") 
.then(response => response.blob()) 
.then(blob => { 
    console.log(blob.type); 
    let reader = new FileReader(); 
    reader.onload =() => { 
    console.log(reader.result) 
    } 
    reader.readAsDataURL(blob) 
})