如何将图片转换base64格式？data:image/png;base64又是什么？

一、我们在看代码时经常在img或css背景图片中看到：
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”

src或 url() 中有一大串编码。它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，后面跟的一串代码就相当于链接地址。

二、目前，Data URL scheme 支持的类型：

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

三、js将图片转化为base64（2种方法）

利用canvas 将图片转化为base64 编码格式
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
img = new Image;
img.src="./vheider.jpg";
// img.setAttribute('crossOrigin', 'anonymous') // 图片跨域时有用
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
dataURL =canvas.toDataURL("image/jpeg");

$('#img').attr('src', dataURL);
console.log(canvas.toDataURL("image/jpeg"))

};

注意：这里要在服务端打开，不然浏览器可能会报 index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 错误

2 . 利用 html5 的 FileReader 将图片转化base64格式
FileReader 是H5提供的一个处理文件的API，
① 判断浏览器是否支持FileReader

if(window.FileReader){
//处理文件
}else{
return "浏览器不支持FileRedaer"
}

② FileReader 接口有四个方法：

readAsBinaryString (file) 将文件读取为二进制码
readAsDataURL (file) 将文件读取为 DataURL
readAsText (file,encoding) 将文件读取为文本(第二个参数是编码格式，一般默认是UTF-8)
about 中断读取

③ FileReader还提供给了一些事件：

onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
注意：重点内容
FileReader 读取后的文件不会返回给FileReader 本身，而是存储在了 result 中

HTML

var result = document.getElementById("result");
var file = document.getElementById("file");
file.change=function(){
var file = file.files[0]
var reader=new FileReader();

reader.readAsBinaryString(file);
reader.οnlοad=function (e){
imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'
console.log(this) // 打印出转换后的 file 文件对象
}
}

如何将图片转换base64格式？data:image/png;base64又是什么？相关推荐

记一次图片转换ZPL格式(ZPL格式是用于斑马打印机)
由于公司一个地方需要用到图片转换ZPL格式去打印;这里的ZPL格式是打印斑马打印机,这里面有一些小的地方是需要注意的. 由于斑马打印机的型号不一样,设置不一样,外加自身的图片格式(.jpg,.png的 ...
如何把图片转换jpg格式呢?
在日常工作中,我们经常会遇到图片格式转换的问题,因为很多平台上传或下载的图片格式不一样,就需要我们掌握一些基本的图片处理技巧.而jpg格式图像文件体积小,打开速度快,几乎不存在与jpg格式图像不兼容的 ...
怎么将bmp格式图片转换jpg格式的
BMP是Windows操作系统中的标准图像文件格式,因为不会对图片进行压缩,所以图像还原较高,清晰度较高,但是因为不会对图片进行压缩,所以体积较大,占用的空间内存较大,而且对于一些网站时不支持该格式的 ...
如何将图片转换jpg格式?详细步骤
如果小伙伴们有从网上收集图片资料,你会发现这些照片基本都是以PNG格式或者BMP格式保存,这是Windows系统下的标准照片格式.如果没有处理很难用在其他应用上.因此,当我们使用它时,我们应该将图片转 ...
Linux环境—JPEG/JPG/PNG图片转换WEBP格式（二）
PHP源码编写 <?php /** * Use : 将JPEG/JPG/PNG 的图片转换为 WEBP 格式 * User: yKan_SF * Date: 2018-2-27 * Ti ...
heic图片转换png格式图片
heic格式图片不是很常见,它是iPhone默认的图片格式,但是用Android手机的人应该占大多数,所以heic格式算是少数人接触的图片格式了,所以heic图片不能在电脑上直接查看,有些平台或者网站 ...
FFmpeg 将图片合成视频将视频导出图片转换视频格式avi to mp4
FFmpeg FFmpeg将视频导出每一帧图片 #ffmpeg -r framerate -i input.mp4 -f image2 output001.jpg~output447.jpg ffmp ...
图片转换word格式用什么软件好
在接触到图片格式的文件时想要编辑利用其中的文字内容怎么办呢?手动输入针对文件比较少的情况是完全没有问题的,但是文件一旦多了还是需要用文字识别软件来完成这一操作.下面就一起看看识别图片文字的软件如何使用 ...
php把网络图片转化为base64格式，解决html2canvas图片跨域问题
一.前言最近在用html2canvas做网页截图功能.这个开源库使用很简单,代码也很方便,但难点在于跨域问题.比如说,我的一个页面中有图片也有文字,图片是来自于图片服务器的网络图片.此时我们要生成截 ...
微信小程序base64图片转换临时链接
小程序内新建 base64src.js const base64src = (base64data, fun) => {const base64 = base64data; //base64格式 ...

如何将图片转换base64格式？data:image/png;base64又是什么？

如何将图片转换base64格式？data:image/png;base64又是什么？相关推荐

最新文章

热门文章