如何從URL中不包含圖片擴展名的圖片擴展名中獲取圖片擴展

我試圖使用圖片API獲取圖片數據/圖片網址的擴展名。如何從URL中不包含圖片擴展名的圖片擴展名中獲取圖片擴展

我可以輕鬆地使用正則表達式的文件擴展名從像{}域的.com /路徑到image.jpg的，但對於名字的圖片網址，如：http://placekitten.com/g/1000/1000

我試圖讓dataUrl用於該位置的圖像數據。這是需要此數據的代碼的特定部分。你可以看到目前我很難編碼'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; 
    }

*更新* 獲取API不會解決這個問題，因爲如果你禁用CORS就不會產生一個可讀的響應。

來源

2016-12-08 Anchalee

你如何成功調用'canvas.toDataURL（）'沒有，如果畫面沒有提供錯誤'接入控制允許Origin'頭？ – guest271314

您可以使用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) 
})

來源

2016-12-08 01:04:28 guest271314

所以使用這種技術的缺點是fetch顯然仍然使用CORS，它不能有效地解決我試圖利用它的問題，而圖像src不應該使用CORS。你有什麼想法如何繞過這個？ – Anchalee

@Anchalee如何在'javascript'處調用'.toDataURL（）'問題如果圖像沒有提供CORS頭文件？如果你可以成功地調用'canvas.toDataURL（）'，你應該可以通過FileReader（）來使用'canvas.toBlob（）'或者'.toBlob（）'來獲得'MIME'類型的圖像。 – guest271314

如何從URL中不包含圖片擴展名的圖片擴展名中獲取圖片擴展

回答

相關問題