通過ctx.drawImage獲取圖像並轉換為base64

Question

我想從base64的faviconkit.com獲取圖像。 由於Cors， Fetch ＆ XHR無法正常工作。 唯一ctx.drawImage是ctx.drawImage 。 任何其他基於JS的方法也可以提供幫助。 謝謝

這是我到目前為止的內容：

 const img = new Image(); const canvas = document.getElementById('canvas'); const base64 = document.getElementById('base64'); const ctx = canvas.getContext('2d'); const dataURL = canvas.toDataURL(); img.onload = () => { ctx.imageSmoothingEnabled = false; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, 32,32); }; img.src = "https://api.faviconkit.com/google.com/32"; base64.style.backgroundImage = "url('" + dataURL + "')"; 

 #base64 { width: 32px; height: 32px; background-color: red; } 

 <canvas id="canvas" width="32" height="32"></canvas> <div id="base64"></div> 

https://jsfiddle.net/on8krzub/

Answer 1

首先，您需要在加載圖像后調用canvas.toDataURL() 。 其次，如果沒有Access-Control-Allow-Origin: *您將無法將遠程圖像轉換為數據URI。

因此，您有一些方法可以解決您的問題：

• 通過本地Web代理或添加CORS標頭的遠程Web代理加載圖像。
• 請與FaviconKit所有者聯系，並建議他添加CORS標頭。
• 使用支持任何來源的請求的另一個API。 例如： https : //favicon.yandex.net/favicon/google.com?size=32

但是，即使遠程映像返回Access-Control-Allow-Origin: *標頭，也不能調用canvas.toDataURL()除非您指定img.crossOrigin = 'Anonymous' 。

順便說一句，我不知道這對您是否重要，但是您必須記住canvas.toDataURL()不會返回原始的Base64字符串。 無論如何，如果有其他想法和示例， 請查看此頁面 。