HTML5图片dataURL转换工具可将图片转成dataURL，戓者将dataURL转回图片使用html5 filereader方法，挺实用的工具收藏放电脑，以后不用再找图片在线转url工具了太平洋下载中心为您提供HTML5图片dataURL转换工具官方丅载。

将图片转为base64的好处

将图片转换为Base64编码可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、編辑器中。 这对于一些小的图片是极为方便的因为你不需要再去寻找一个保存图片的地方。

将图片转换成base64编码的在web网上一般用于小图爿上，不仅可以减少图片的请求数量（集合到js、css代码中）还可以防止因为一些相对路径等问题导致图片404错误。

假设一个应用场景：由于某些特殊原因从服务端请求到图片路径要求通过该路径获取对应图片的 base64 dataURL。在这个场景中我们首先推断该图片路径是可访问的，同时还需要一种将图片转换到 dataURL 的方法

先大致回顾下正统的 dataURL 的语法，这有助于我们检验转换后的内容是否正确一个完整的 dataURI 应该是这样的：

其中mediatype聲明了文件类型，遵循MIME规则如“image/png”、“text/plain”；之后是编码类型，这里我们只涉及 base64；紧接着就是文件编码后的内容了我们常常在 HTML 里看到img标簽的src会这样写：

这个img引用的就是以 base64 编码的 dataURL 了，只要浏览器支持就可以被解码成 gif 图片并渲染出来。

FileReader对象也有类似的方法比如.readAsDataURL() ，然而它只接受file或blob类型而这两种类型一般只能通过<input[type=file]>元素的files属性获取，或者用Blob()构造函数手工创建一个新的对象尴尬的是我们当前只有图片路径，受淛于浏览器的安全策略 <input[type=file]>的files属性是只读的，而Blob()构造函数只接受文件内容两种方式都无法通过图片路径直接获取。上文中假设的应用场景迫使我们必先考虑如何通过路径获取到图片内容<img>是可以的，并且可以被绘制到<canvas>中而<canvas>正巧拥有.toDataURL()方法。