将图片转换base64格式,data:image/png;base64是什么?
2017-04-11 14:57
976 查看
一、我们在看代码时经常在img或css背景图片中看到:
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”
src或 url() 中有一大串编码。它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具, 后面跟的一串代码就相当于链接地址。
二、目前,Data URL scheme 支持的类型:
三、js将图片转化为base64(2种方法)
利用canvas 将图片转化为base64 编码格式
注意: 这里要在服务端打开,不然浏览器可能会报
2 . 利用 html5 的 FileReader 将图片转化base64格式
FileReader 是H5提供的一个处理文件的API,
① 判断浏览器是否支持FileReader
② FileReader 接口有四个方法:
readAsBinaryString (file) 将文件读取为二进制码
readAsDataURL (file) 将文件读取为 DataURL
readAsText (file,encoding) 将文件读取为文本(第二个参数是编码格式,一般默认是UTF-8)
about 中断读取
③ FileReader还提供给了一些事件:
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成
ba03
时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
注意:重点内容
FileReader 读取后的文件不会返回给FileReader 本身, 而是存储在了 result 中
HTML
JS
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 文件读取成功完成
ba03
时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
注意:重点内容
FileReader 读取后的文件不会返回给FileReader 本身, 而是存储在了 result 中
HTML
<input type="file" id="file" multiple="multiple"> <div id="imgDiv"></div>
JS
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.onload=function (e){ imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>' console.log(this) // 打印出转换后的 file 文件对象 } }
相关文章推荐
- H5、js、上传头像将图片转换成base64格式的:data:image/png;base64,iVBORw0
- 图片上传图片后 data:image/png;base64是什么
- data:image/png;base64是什么
- data:image/png;base64是什么
- data:image/png;base64有什么作用
- data:image/png;base64这什么玩意
- data:image/png;base64是什么
- data:image/png;base64是什么
- 网页上有些图片的src或css背景图片的url后面跟了一大串字符 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAA
- data:image/png;base64是什么
- Css中图片地址 data:image/png;base64+一连串字母 的意思
- 通过data:image/png;base64把图片直接写在src里
- data:image/png;base64是什么
- data:image/png;base64有什么作用
- data:image/png;base64是什么
- data:image/png;base64可以吧图片直接写在src里面
- 利用jpedal进行pdf转换成jpeg,jpg,png,tiff,tif等格式的图片
- photoshop 源文件psd 图片 转换格式成jpg、png、gif
- [转载]C#图片格式(JPG,BMP,PNG,GIF)等转换为ICO图标
- Java 转换png jpg gif格式图片的相互转换的实现