javascript 图片(image)转换base64

发布网友发布时间：2024-09-25 15:19

共1个回答

热心网友时间：2024-10-03 17:16

在项目开发中，我们常遇到需要将图片以字符串形式保存到数据库或进行其他处理的情况。通常情况下，图片以文件形式上传，通过img标签的src属性引用。然而，有时为了节省空间或方便数据库存储，需要将图片转换为base64字符串。

实现这一功能有两种常用方法：使用canvas和FileReader。

方法一：使用canvas。首先，获取图片的宽高，然后将图片内容绘制到canvas上。接着，使用canvas的toDataURL方法将canvas内容转换为base64格式的字符串。但需要注意的是，若直接引用网络图片，可能因跨域问题导致错误。解决方法是在toDataURL调用前，加入随机数确保每次都引用最新资源，避免缓存干扰。

方法二：使用FileReader。通过FileReader对象的readAsDataURL方法，可以直接读取由input元素上传的图片文件，并将其转换为base64编码的字符串。

总结来说，两种方法均可高效地将图片转换为base64字符串，适用于不同场景。开发者可根据具体需求选择合适的方法，并将实现代码保存为html文件，以便在需要时直接调用。