怎么样把图片转成base64

怎么样把图片转成base64

为了演示下如何操作，首先创建一个测试的html页面，添加如图的测试标签和js代码主要是添加一个file表单用来选择系统的图片资源，然后就是new FileReader对象读取和转换base64字符串

打开浏览器访问测试页面，如图，可以看到一个图片选择框，下面就是转换按钮和base64字符串显示的多行文本框

点击选文件按钮，从系统中选择一个测试的图片资源，随便选择一个即可，用于测试使用

图片选择完成之后，点击转换base64按钮，调用自定义的toBase64的js函数，FileReader将转换之后的图片数据以base64格式的字符串显示在多行文本框中前面是数据类型信息，后面就是base64编码之后的图片数据

转换之后的base64数据可以直接放在img标签中使用，可以做一个预览的效果，如图添加一个img标签，然后js的方式把base64的数据赋值给img的src属性

刷新浏览器查看效果，可以看到直接使用转换之后的base64数据可以正常的显示图片信息。