图片转为base64

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

将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。
引言
假设一个应用场景：由于某些特殊原因从服务端请求到图片路径，要求通过该路径获取对应图片的 base64 dataURL。在这个场景中，我们首先推断该图片路径是可访问的，同时还需要一种将图片转换到 dataURL 的方法。

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

data:[<mediatype>][;base64],<data>

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

src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"

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

万事具备，我们只需要把获取到的图片放到里再通过.toDataURL()方法转化下，就可以得到以 base64 编码的 dataURL。来看这个方法的语法：

canvas.toDataURL([type, encoderOptions]);

canvas是DOM元素对象；参数type指定图片类型，如果指定的类型不被支持则以默认值image/png替代；encoderOptions可以为image/jpeg或image/webp类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代。

需要注意的是：在转换成 dataURL 前必须先确保图片成功加载到，于是.toDataURL()方法应该写在的onload异步事件中。现在就来实现一个功能函数：

 function getBase64(url){//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染var Img = new Image(),dataURL='';Img.src=url;Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件var canvas = document.createElement("canvas"), //创建canvas元素width=Img.width, //确保canvas的尺寸和图片一样height=Img.height;canvas.width=width;canvas.height=height;canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL};}

一个可供随时调用的转换函数完成了，它会在图片被加载后返回一整个 dataURL 字符串。

图片转为base64相关推荐

php 图片文件转base64编码格式,php如何将图片转为base64编码格式
php将图片转为base64编码格式的方法:首先读取图片流:然后利用[base64_encode]函数进行编码格式转换即可. PHP保存Base64图片base64_decode的问题 PHP对Bas ...
java返回图片base64_java将图片转为base64返回给前端
本文实例为大家分享了java将图片转为base64返回给前端的具体代码,供大家参考,具体内容如下一.controller端代码 @RequestMapping(value = "/capt ...
为什么要将图片转为base64格式
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址; 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服 ...
Nodejs 使用 Buffer 将图片转为 base64
一直以为图片转为 base64 很复杂,结果今天看了下 Docusaurus 的 plugin-ideal-image 插件源码,居然只要一行代码就完事了: const toBase64 = (ext ...
Java将图片转为Base64
Java将图片转为Base64 import net.coobird.thumbnailator.Thumbnails; import org.apache.commons.codec.binary. ...
java 上传图片转base64_java将图片转为base64返回给前端
本文实例为大家分享了java将图片转为base64返回给前端的具体代码,供大家参考,具体内容如下一.controller端代码 @RequestMapping(value = "/capt ...
使用canvas.toDataURL把图片转为base64格式
使用canvas.toDataURL把图片转为base64格式 function getBase64(url) {//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 c ...
php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示（代码实例）...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来详细的看一看base64编码: 什么是bas ...
Java处理富文本编辑器的图片转为base64编码
一.需求(场景) 后台(内网)通过富文本编辑器编辑的图文信息,需要在移动端(外网)展示,需要将内容中的图片的src的路径替换成base64编码的传递到前台. 二.思路 1.获取内容中的<img& ...
剪贴板中图片转为BASE64格式
需求将图片复制到剪贴板后,希望将图片快捷地转换为BASE64格式. 各种在线工具往往需要先将图片保存到本地,然后将本地文件上传.现在考虑将图片保存到本地这一步去掉,直接将图片从剪贴板粘贴到网页的某个 ...

图片转为base64

图片转为base64相关推荐

最新文章

热门文章