Javascript 將上傳的圖片轉換為 canvas.toDataURL()

Question

我需要圖像的數據網址在：

 'data:image/jpeg;base64,""'.

格式

所以我的第一個解決方案是將上傳的圖像渲染為 Image 元素，並使用canvas.drawImage(imageElement)來獲取canvas.toDataURL() ，但我得到的是 canvas has been tainted 錯誤。

好奇有沒有其他方法可以獲取上傳圖片的數據 url？

謝謝。

Answer 1

你不需要畫布。 您可以只使用File API 。

 const element = document.getElementById('file'); element.addEventListener('change', ({target: {files}}) => { const [image] = files; const reader = new FileReader(); reader.onload = ({target: {result}}) => console.log(result); reader.readAsDataURL(image); });

 <input id="file" type="file">