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">