webp图片格式前端兼容与显示处理以及其图片原始数据的获取
2017-12-13 15:13
801 查看
前言
不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。
对 WebP 的研究缘起于手机 QQ 原创表情商城，由于表情包体积较大，在 2G/3G 的网络环境下加载较慢。于是催生了其诞生，今年 WebP 图片格式得到越来越多的关注，很多团队也开始布道，前阵子的前端圈“走进腾讯互娱前端技术专场”也有相关专题。
关于更多webp的信息可以参考：WebP 探寻之路
这样一个可以减少图片体积又不影响画质的图片格式，在手机端Android和iOS的App只要引入Google提供的解码库，都可以很轻松的支持WebP格式。不过在Web上，在使用中却有相关问题，最大的问题就是不兼容，火狐完全不支持。谷歌和欧朋等支持较好。
这意味着我们前端又要为该死的兼容考虑了。
解决方法：
本人觉得最佳的解决方法是：使用JS解码WebP图片既然WebP的解码器是开源的，那么能否用JS来实现呢？当然可以，有人就用JS写出了WebP的解码器。引入这个JS库，就是将所有的WebP图片用JS解码后转换为Base64，然后替换掉原来的URL，这样就可以让原本不支持WebP的浏览器正常显示WebP了。这个库的使用方法非常简单，看网页的说明即可。
这里为大家放上这个库的地址官网地址：webp.js，和github下载地址：webpjs
这种方法的缺点是，因为JS要解码WebP图片，需要在此异步请求SRC中的URL（不过因为图片本身之前被下载了一次，直接使用了缓存）；而且JS解码比较慢，对性能有影响，可能需要一段时间才能显示出图片来。但图片体积的缩小可以很好的对这个JS解码时间进行对冲。
我们在github的
webpjs下载地址把
webpjs下载下来，然后引入
webpjs.min.js，使用很简单只需要引入即可，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script> <script type="text/javascript" src="exif.js"></script> </head> <body> <img src="lB3O1WmG5M0JxM0GhA_1668_2500.webp"> </body> </html>
引入后，他就可以兼容火狐了，其本质是通过使用JS解码WebP图片的，放上截图：
我们可以看到src是base64码。是不是很简单？
webp图片信息的获取
开始前请在github上下载我的项目：webp-ArrayBuffer，然后里面有一个文件是：lB3O1WmG5M0JxM0GhA_1668_2500.webp，这是我们IOS工程师处理过得webp图片，你们可以拿来做案例。
有时我们需要获取图片的原始数据信息，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
我们一般使用
exif.js来获取图片的原始数据信息，github下载exif.js，然后使用
<script type="text/javascript" src="exif.js"></script>引入
exif.js，如果你有npm环境可以使用
npm install exif-js --save进行安装。而且它的语法也特别简单。
虽然 Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，但是图片转换为webp后由于webp自身原因在IOS等手机上写入信息并不现实，太过与繁琐与难缠，这样 Exif.js 无法获取原始数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script>
<script type="text/javascript" src="exif.js"></script>
</head>
<body>
<img src="lB3O1WmG5M0JxM0GhA_1668_2500.webp" onclick="exif()" id="imgElement">
<script>
function exif () {
console.log(EXIF.getAllTags(document.getElementById('imgElement')));
console.log(EXIF.getTag(document.getElementById('imgElement'), 'GPSLongitude'));
}
</script>
</body>
</html>结果如图：
Exif.js 并没有什么乱用
于是把原始数据信息加入二进制信息尾部类似与这样，如图:
起初想起使用
fileReader，后来才恍然记起来它貌似只能用在file的对象中，如果有不明白的可以参考我的博客：web前端-在迷惘中的探索HTML5（三）文件操作FileReader。
如果只能在file对象中使用那么
fileReader将无法在这里运用，但是肯定有别的方法运用
fileReader不然node的文件管理和其他js文件管理插件不都白搭了？终于不负有心人，我在fileReader-MDN上找到了这句话：
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
Blob 对象是我们的生机。于是，代码迅速运转：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script>
</head>
<body>
<img src="lB3O1WmG5M0JxM0GhA_1668_2500.webp" onclick="exif()" id="imgElement">
<script>
function exif () {
var imgElement = document.getElementById("imgElement");
var blob = new Blob([imgElement], {type: 'image/png'});
var fr = new FileReader();
console.log(blob);
// console.log(fr.readAsDataURL(blob));
// console.log(fr.readAsArrayBuffer(blob));
fr.readAsText(blob);
fr.onload = function(e) {
console.log(e);
}
}
</script>
</body>
</html>可是返回的参数e中并没有任何有用的信息，如图：
按理来说ProgressEvent下的target的result应该返回结果，
fr.readAsText(blob);应该返回二进制文本信息，可是除了
[object HTMLImageElement]屁也没有，饱受打击，吐会血…
很郁闷，怎么办？想起了xhr2，XHR2引入了大量的新功能（例如跨源请求、上传进度事件以及对上传/下载二进制数据的支持等），于是进入这里面XMLHttpRequest2 新技巧，陶冶了一番。
既然要用到xhr2那么启一个本地服务是必不可少的，不然无法模拟请求，你们想办法在这个目录里启一个服务即启一个localhost，这里我是用
python -m http.server来启动一个
http://localhost:8000服务的，这里的案例是以
http://localhost:8000来进行实例的，估计很多前端如果不了解是不知道，你们可以选择自己的方式启动自己的服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script>
</head>
<body>
<script>
function exif () {
var url = 'http://localhost:8000/lB3O1WmG5M0JxM0GhA_1668_2500.webp'
var xmlhttp = null
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
/* eslint-disable no-new */
xmlhttp = new window.XMLHttpRequest()
} else { // code for IE6, IE5
/* eslint-disable no-new */
xmlhttp = new window.ActiveXObject('Microsoft.XMLHTTP')
}
xmlhttp.open('GET', url, true)
xmlhttp.withCredentials = true
// recent browsers
if ('responseType' in xmlhttp) {
xmlhttp.responseType = 'arraybuffer'
}
// older browser
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/plain; charset=x-user-defined')
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var file = xmlhttp.response || xmlhttp.responseText
var blob = new Blob([file], {type: 'image/png'})
var fr = new FileReader();
fr.readAsText(blob);
fr.onload = function(e) {
console.log(e.target.result);
}
}
}
xmlhttp.send()
}
</script>
</body>
</html>终于在这里log到我们的需要的数据，结果如图：
我们下来做的就是把坠在结尾的
{
"data" : {
"lat" : "37.785834",
"lon" : "-122.406417",
"time" : "2017-06-05 04:39:29"
}
}给截取出来有好几种方式，第一种是通过
fr.readAsText(blob);输出信息字符串，找倒数第二个位置的
{符号，然后截取到最后；第二种方法是通过fr.readAsArrayBuffer(blob);输出二进制信息，按字节顺序找到其在二进制中的位置，然后截取到最后。第一种方法比较简单，第二种方法比较变态，需要你了解很多计算机底层的东西，才能搞的并不是那么的明白，这里决定使用第二种的方法，首先我们得知道整个二进制的长度，然后我们得找到我们需要的东西在二进制当中的位置。
使用readAsArrayBuffer()方法，onload之后，返回的参数e下面的target的result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容。我们把代码里的
fr.readAsText(blob);改为
fr.readAsArrayBuffer(blob);，然后log输出
fr.onload = function(e) {
console.log(e);
console.log(e.target.result);
}输出结果如图：
我们在
fr.onload = function(e) {}中返回的参数e中e.target.result有一个byteLength属性，
byteLength+1我们就可以知道整个二进制的长度。
在log中我们可以看到一个
ArrayBuffer{}，是什么？ArrayBuffer对象是被用来表示一个通用的，固定长度的二进制数据缓冲区。你不能直接操纵ArrayBuffer的内容；相反，你应该创建一个表示特定格式的buffer的类型化数组对象(typed array objects)或数据视图对象DataView 来对buffer的内容进行读取和写入操作。那么数据视图对象DataView又是什么？数据视图对象DataView实质上是DataView视图提供了一个与平台中字节在内存中的排列顺序(字节序)无关的从ArrayBuffer读写多数字类型的底层接口。
说了这么多大概有点晕呼，其实本质也算不上什么，
fr.readAsArrayBuffer(blob);得到一个ArrayBuffer对象，这个对象不能直接操纵，我们需要借助数据视图对象DataView来进行数据的操纵，因为webp它是以riff档案为基础构建的，所以RIFF档案在二进制中占据的大小决定着它的大小，RIFF档案由一个简单的表头（header）跟随着多个区块所组成，其中其表头是12个字节，4字节为”RIFF”，4字节是这个档案的型态字元如”AVI “或”WEBP”，还有4字节是一个无符号的长度是32位整数的小端序，整个档案的大小，会扣掉辨识字元和长度，共8个字节。
因为RIFF档案是一个无符号的长度是32位整数的小端序所以我们可以根据
DataView.prototype.getUint32()方法获得从DataView起始位置以byte为计数的指定偏移量即它在整个二进制中的位置，我们的二进制是：webp-RIFF档案+我们需要的JSON，我们获得从DataView起始位置以byte为计数的指定偏移量就等于获得二进制中webp-RIFF档案这部分，因为整个档案的大小会扣掉8个字节的辨识字元和长度，于是我们通过
getUint32()+8就可以取到我们需要的JSON的位置。
fr.onload = function(e) {
console.log(e);
console.log(e.target.result);
var buffer = e.target.result;
var dv = new<
d4a5
/span> DataView(buffer, 0);
var data = buffer.slice(dv.getUint32(4, true)+8, buffer.byteLength+1);
}最后
slice(dv.getUint32(4, true)+8, buffer.byteLength+1);就截取到这一部分二进制，由于我们截取的是ArrayBuffer对象得到的是一个二进制数组，我们需要把我们的数组变成我们需要的JSON，于是建造一个函数来实现：
function arrayBufferToString(buffer){
var arr = new Uint8Array(buffer);
console.log(arr);
var str = String.fromCharCode.apply(String, arr);
if(/[\u0080-\uffff]/.test(str)){
throw new Error("this string seems to contain (still encoded) multibytes");
}
return str;
}函数会返回一个字符串，这个字符串就是我们需要的最终结果:
{
"data" : {
"lat" : "37.785834",
"lon" : "-122.406417",
"time" : "2017-06-05 04:39:29"
}
}于是完整的代码出炉了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script>
</head>
<body>
<script>
function arrayBufferToString(buffer){ var arr = new Uint8Array(buffer); console.log(arr); var str = String.fromCharCode.apply(String, arr); if(/[\u0080-\uffff]/.test(str)){ throw new Error("this string seems to contain (still encoded) multibytes"); } return str; }
function exif () {
var url = 'http://localhost:8000/lB3O1WmG5M0JxM0GhA_1668_2500.webp'
var xmlhttp = null
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
/* eslint-disable no-new */
xmlhttp = new window.XMLHttpRequest()
} else { // code for IE6, IE5
/* eslint-disable no-new */
xmlhttp = new window.ActiveXObject('Microsoft.XMLHTTP')
}
xmlhttp.open('GET', url, true)
xmlhttp.withCredentials = true
// recent browsers
if ('responseType' in xmlhttp) {
xmlhttp.responseType = 'arraybuffer'
}
// older browser
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/plain; charset=x-user-defined')
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var file = xmlhttp.response || xmlhttp.responseText
var blob = new Blob([file], {type: 'image/png'})
var fr = new FileReader();
fr.readAsArrayBuffer(blob);
fr.onload = function(e) {
console.log(e);
console.log(e.target.result);
var buffer = e.target.result;
var dv = new DataView(buffer, 0);
var data = buffer.slice(dv.getUint32(4, true)+8, buffer.byteLength+1);
console.log(data);
console.log(arrayBufferToString(data));
}
}
}
xmlhttp.send()
}
</script>
</body>
</html>
点击图片会出现结果如图：
小结
这样就完了，做一个整体性的说明：为了获取webp的图片的原始数据信息，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。在处理图片时，我们为了方便把这些信息加在webp二进制数据信息的末尾，这意味着我们获取的二进制信息是这种结构：二进制webp-RIFF档案+我们需要的JSON。为了取到我们加在二进制信息末尾的JSON，我们有两种方式，第一种是通过
fr.readAsText(blob);输出信息字符串，找倒数第二个位置的
{符号，然后截取到最后；第二种方法是通过fr.readAsArrayBuffer(blob);输出二进制信息，按字节顺序找到其在二进制中的位置，然后截取到最后。我们使用第二种的方法，首先我们得知道整个二进制的长度，然后我们得找到我们需要的东西在二进制当中的位置。
我们在
fr.onload = function(e) {}中返回的参数e中e.target.result有一个byteLength属性，
byteLength+1我们就可以知道整个二进制的长度。
找到我们需要的东西在二进制中的位置，我们需要
二进制webp-RIFF档案的偏移量，
fr.readAsArrayBuffer(blob);得到一个ArrayBuffer对象，这个对象不能直接操纵，我们需要借助数据视图对象DataView来进行数据的操纵，又因为webp它是以riff档案为基础构建的，所以RIFF档案在二进制中占据的大小决定着它的大小，RIFF档案由一个简单的表头（header）跟随着多个区块所组成，其中其表头是12个字节，4字节为”RIFF”，4字节是这个档案的型态字元如”AVI “或”WEBP”，还有4字节是一个无符号的长度是32位整数的小端序，整个档案的大小，会扣掉辨识字元和长度，共8个字节。
因为RIFF档案是一个无符号的长度是32位整数的小端序所以我们可以根据
DataView.prototype.getUint32()方法获得从DataView起始位置以byte为计数的指定偏移量即它在整个二进制中的位置，我们的二进制是：二进制webp-RIFF档案+我们需要的JSON，我们获得从DataView起始位置以byte为计数的指定偏移量就等于获得二进制中webp-RIFF档案这部分，因为整个档案的大小会扣掉8个字节的辨识字元和长度，于是我们通过
getUint32()+8就可以取到我们需要的JSON的位置。最后
slice(dv.getUint32(4, true)+8, buffer.byteLength+1);就截取到这一部分二进制，由于我们截取的是ArrayBuffer对象得到的是一个二进制数组，我们需要把我们的数组变成我们需要的JSON，于是建造一个函数来实现：
function arrayBufferToString(buffer){
var arr = new Uint8Array(buffer);
console.log(arr);
var str = String.fromCharCode.apply(String, arr);
if(/[\u0080-\uffff]/.test(str)){
throw new Error("this string seems to contain (still encoded) multibytes");
}
return str;
}函数会返回一个字符串，这个字符串就是我们需要的最终结果:
{
"data" : {
"lat" : "37.785834",
"lon" : "-122.406417",
"time" : "2017-06-05 04:39:29"
}
}大功告成！！！
提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 取从textarea中存到MYSQL的数据以原格式显示问题以及解决MySQL日期处理和标签的使用
- springMVC高级部分（数据校验，数据错误回显（自定义格式错误显示），拦截器，异常处理，文件上传，文件下载，springmvc运行流程以及springmvc和struts2对比）
- python将图片转换为Framebuffer裸数据格式(终端显示图片)
- <img src 引入base64格式数据 显示图片 >
- 使用JAVA如何对图片进行格式检查以及安全检查处理
- Android下的图片显示与处理_android数据（XML、JSON、image）
- struts2 + ajax（由前台的form提交数据到后台，再根据form所调用返回获取的后台json格式的数据返回到前端，然后前端用jquery对json数据进行解析）==》》涉及文件上传的部分
- 树形数据的反选有两种方法以及处理后台返回拼装htmL的异步获取不到现象（但是页面F12可以看到）
- 批量读取文件夹下的DR8光谱数据，并完成显示保存图片以及统计Z和Obj的分布情况
- 异步获取数据Ajax，以及对获取的数据进行绑定（显示在页面上）
- 用CImage在picture控件上显示外部图片，并获取各像素颜色数据
- [Extjs6] 对gridpanel数据显示前对其进行相关的格式处理
- 从网络获取图片保存到sdcard，以及加载为bitmap显示到ImageView
- 第4章 处理用户输入与显示数据------------(参数计数、获取所有数据)
- 基于Bmob平台进行从服务器获取图片数据（url）的操作，并以瀑布流得形式显示图片
- struts2 + ajax（由前台的form提交数据到后台，再根据form所调用返回获取的后台json格式的数据返回到前端，然后前端用jquery对json数据进行解析）==》》涉及非文件上传的部分
- js兼容ie和火狐支持获取图片大小和显示
- input标签type="file"的格式要求，以及文件阅读，图片上传前的显示
- 前台js获取到后台json数据，eval解析json后，日期（object）对象转换为date日期格式显示
- 举例说明android中Bitmap、ListView以及ImageView的综合使用---显示图片并获取图片的宽和高