js 将图片转换为base64编码

JavaScript015

js 将图片转换为base64编码,第1张

将图片转换为Base64

获取图片Base64编码

方式一:Blob和FileReader 对象

实现原理:

使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]

使用FileReader 对象接收blob

方式二:canvas.toDataURL()方法

实现原理:

使用canvas.toDataURL()方法

需要解决图片跨域问题 image.crossOrigin = ''

使用了Jquery库的$.Deferred()方法

获取到上传的文件myfile,创建一个fileRead文件对象,使用readAsDataURL方法可以将读取到的文件编码成Data URL。文件加载成功后,e.target.result就是文件图片所对应的base64编码。直接赋值给img的src,就能显示图片。

下面是onload里e对象打印的结果,可以看出e.target.result是文件图片的信息。

下面打印的是base64的编码,可以在img的src中直接引用,或者复制到浏览器搜索框里也能直接搜索图片。

使用canvas画一个填充色为红色的矩形,试点按钮后,使用canvas.toDataURL方法:返回一个包含图片展示的 data URI 。可以使用type参数其类型,默认为 PNG 格式。把得到的base64编码赋给img的src,显示图片。

结果图如下:

两种图片的base64的方法都很实用,项目开发中可能会遇到,今天来分享给大家。