从web图片裁剪出发：了解H5中的Blob
刚开始做前端的时候，有个功能卡住我了，就是裁剪并上传头像。当时两个方案摆在我面前，一个是flash，我不会。另一个是通过iframe上传图片，然后再上传坐标由后端裁剪，而我最终的选择是后者。有人会疑惑，为什么不用H5的Canvas和FormData，第一要考虑ie8的兼容性，第二那时候眼界没到，这种新东西光是听听都怕。
后来随着Mobile项目越做越多，类似的功能开发得也越来越多，Canvas+FormData成为了标配方案。但做的多了却一直没有静下心来研究，浏览器怎么使用H5的方式裁剪并把文件发送出去，回过头看都是知其然不知其所以然。这篇随笔先做个初步的拆解，就是当通过input选择一张图片后，这张图片在浏览器里是怎样的一个存在。
文件操作一直是早期浏览器的痛点，全封闭式，不给JS操作的空间，而随着H5一系列新接口的推出，这个壁垒被打破。对，是一系列接口，以下会涉及到如下概念：Blob、File、FileReader、ArrayBuffer、ArrayBufferView、DataURL等，其他如FormData、XMLHttpRequest、Canvas等暂不深入。
我们先创建一个简单的页面，只有一个input[type=file]。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file">
</body>
</html>
然后我们在JS中获取这个元素
var input = document.querySelector('input[type=file]');
可以看到这个元素有个属性files，它的类型是FileList。这个类不做过多介绍，就是一个类数组，由浏览器通过用户行为往里面添加或删除元素，JS只有访问其元素的接口，无法对其进行操作。而files的元素就是File类型，File是blob的子类，比blob主要多出一个name的属性。
现在我们选取一个文件，这里问题来了，这个元素是文件在浏览器的完整备份，还是一个指向文件系统的引用？答案是后者，我们选定文件，然后修改文件名，再上传文件，浏览器报错了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name='test'>
<input type="file">
<input type="submit" value="提交">
</form>
<script>
var input = document.querySelector('input[type=file]'),
form = document.test;
form.addEventListener('submit', function(e) {
e.preventDefault();
var file = input.files[0],
fd = new FormData(),
xhr = new XMLHttpRequest();
fd.append('file', file);
xhr.open('post', '/upload');
xhr.send(fd);
});
</script>
</body>
</html>
使用chrome打开chrome://blob-internals/，可以看到一条这样的记录
可见这仅仅是一条引用。第二个问题来了，如果我们要对图片进行处理，那么只拿到引用是不行的，肯定要在浏览器有一份数据的备份，那么怎么获取这个备份呢？答案就是FileReader，FileReader的对象主要有readAsArrayBuffer、readAsBinaryString、readAsDataURL、readAsText等方法，它们的入参都是Blob对象或是File对象，结果对应最终获取的数据类型。这几个方法是异步的，读取过程中会抛出对应的事件，其中读取完毕的事件为load，所以数据的处理要放在onload下。我先给一个简单的example：
input.addEventListener('change', function() {
var file = this.files[0],
fr = new FileReader(),
blob;
fr.onload = function() {
blob = new Blob([this.result]);
};
fr.readAsArrayBuffer(file)
});
当用户选取图片时，调用FileReader的readAsArrayBuffer把图片数据读出来，然后生成新的blob对象保存在浏览器中。查看chrome://blob-internals/，可以注意到这一项：
对应的就是刚才的blob，可以对比length和图片本身的大小。上面那个demo很突兀，完全没有解释什么是ArrayBuffer，为什么创建blob要传入一个ArrayBuffer。那么第三个问题来了，什么是ArrayBuffer、BinaryString、DataURL、Text，它们有什么联系和不同，Blob类到底是个什么东西？首先，图片是个二进制文件，它的内容也是由0和1组成的。用户肯定是看不懂0和1的组合的，能看懂的只有最终展示的图片，而程序员也看不懂0和1，但程序员能看懂另外几种0和1变换后的组合。它们就是以上的4种：ArrayBuffer、BinaryString、DataURL和Text。
其中ArrayBuffer是最接近二进制数据的表现的，可以理解为它就是二进制数据的存储器，这也是为什么二进制文件的Blob需要传入ArrayBuffer。正因为它的内部是二进制数据，所以我们是不可以直接操作的。这时候就需要一个代理者帮助我们读或写，这个代理者就是ArrayBufferView。
ArrayBufferView不是一个类，而是一个类的集合，包括：Int8Array、Uint8Array、Uint8ClampedArray、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array和DataView，分别表示以8位、16位、32位、64位数字为元素对ArrayBuffer内的二进制数据进行展现，它们都有统一的属性buffer指向对应的ArrayBuffer。栗子暂时不举，之后会用到。
ArrayBuffer简单介绍了，那什么是BinaryString呢？是二进制数据直接以byte的形式展现的字符串，比如1100001，用Uint8表示就是97，用BinaryString表示就是'a'。对，前者是charCode，后者是char，所以BinaryString和Uint8Array之间是可以自由转换的。
接下来是DataURL了，这是一个经过base64编码的字符串，它的组成如下：
data:[mimeType];base64,[base64(binaryString)]
除了固定的字符串部分，它主要包含两个重要信息即中括号括起的部分，mimeType和base64编码后的binaryString，从它里面我们可以这样取到这两个信息。
var binaryString = atob(dataUrl.split(',')[1]),
mimeType = dataUrl.split(',')[0].match(/:(.*?);/)[1];
最后，Text是什么呢？在ftp上，文本传输和二进制传输的区别是什么，那Text类型和BinaryString类型的区别就是什么了，也就是Text类型是经过一定转换的BinaryString，对于图片来说，这个类型是用不到的。
好了，现在我们了解了一张图片在浏览器里以数据的形式可以表现为ArrayBuffer、BinaryString、DataURL，那么第四个问题来了，它们各有实际用途呢？我们从应用场景出发，回到文章开头的问题，图片的裁剪和上传。图片的裁剪我们要倚仗牛逼的canvas，而canvas的context有这么一个方法toDataURL，就是把canvas的内容转换为图片数据，而数据的表现形式就是DataURL！图片的上传我们用的是FormData，它可以添加Blob类型的对象进去，那Blob类型除了从input[type=file]中直接获取，还能靠什么生成呢？自然是ArrayBuffer！好了，裁剪图片的功能要用到DataURL，上传图片的功能要用到ArrayBuffer，那怎么从DataURL转换为ArrayBuffer呢？我们知道DataURL很重要的组成部分就是经过base64编码的BinaryString，那么很显然我们可以从DataURL中提取BinaryString，而BinaryString就是ArrayBuffer对应的Uint8Array的字符形式的表现，所以可以由BinaryString生成ArrayBuffer，那么DataURL到ArrayBuffer之间的桥就是BinaryString！
到现在为止，我们说了很多概念，然而这并没有什么卵用，验证概念的方法不是提出新的概念，而是建立一个example。以下的example就是把图片数据从input中取出，然后以DataURL的格式进行预览，提交时把预览生成图片上传的整个流程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name='test'>
<input type="file" name='file'>
<input type="submit" value="提交">
</form>
<img src="" alt="">
<script>
var img = document.querySelector('img'),
preview;
document.test.file.addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
preview = this.result;
img.src = preview;
};
fr.readAsDataURL(this.files[0]);
})
document.test.addEventListener('submit', function(e) {
e.preventDefault();
var binaryString = atob(preview.split(',')[1]),
mimeType = preview.split(',')[0].match(/:(.*?);/)[1],
length = binaryString.length,
u8arr = new Uint8Array(length),
blob,
fd = new FormData(),
xhr = new XMLHttpRequest();
while(length--) {
u8arr[length] = binaryString.charCodeAt(length);
}
blob = new Blob([u8arr.buffer], {type: mimeType});
fd.append('file', blob);
xhr.open('post', '/upload');
xhr.send(fd);
})
</script>
</body>
</html>
现在图片已经被我们发射出去了，那么图片在协议包里是以怎样的数据形式存在的呢？当然是以二进制的形式，我们抓一下包，发现在fiddler里面这个二进制串会转换为字符串，即上面的binaryString。
既然通过发送的blob到最后在数据包里都是以binaryString的形式展示，那么是否可以直接使用xhr.send(binaryString)发送图片呢？貌似是可以的，但我们试一下就会发现问题，服务器获取到的信息不能生成一张图片，说明数据被破坏了。那么数据是谁破坏的呢？这个罪魁祸首就是send，当send的参数是字符串的时候，会对字符串进行utf8编码。我们看下相同的图片通过blob发送出去和通过binaryString直接发送出去的数据会有什么不同。这里我们用wireshark抓包，因为wireshark会自动对数据块进行分割，可以比较直观的看到图片所对应的数据。PS: 这张图片一张1px白色的png。
前面是正常的图片数据，后面是经过了utf8编码的图片数据。我们可以看到数据确实被破坏了，当然在知道元数据是binaryString的情况下，这种破坏是可以恢复的，不过不是这里讨论的范畴了，感兴趣的可以跳转阮老师的博客《字符编码笔记:ASCII，Unicode和UTF-8》。
好了，整个图片在浏览器端的拆解到此结束。理解了这些，就走完了写出牛逼的客户端图片裁剪工具的第一步。
从web图片裁剪出发：了解H5中的Blob的更多相关文章
- 从web图片裁剪出发：了解H5中的canvas
本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...
- Android大图片裁剪终极解决方案（上：原理分析）
转载声明:Ryan的博客文章欢迎您的转载,但在转载的同时,请注明文章的来源出处,不胜感激! :-) http://my.oschina.net/ryanhoo/blog/86842 约几个月前,我正 ...
- web开发实战--图片裁剪和上传
前言: 最近的开发中, 有一个上传头像的任务. 由于头像本身的特殊性, 其一般流程为选择图片, 编辑裁剪区域, 再继而上传图片操作. 看似简单的东西, 实则是挺麻烦的一件事. 借助这次开发机会, 来具 ...
- H5图片裁剪升级版
前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...
- H5图片裁剪升级版（手机版）
前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...
- 移动端 H5图片裁剪插件，内置简单手势操作
前面曾经写过一篇<H5图片裁剪升级版>,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中. 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计 ...
- apiCloud中图片裁剪模块FNImageClip的使用
思路 1.获取需裁剪图片的地址 2.跳转到裁剪页面 3.裁剪成功返回新图片地址 4.替换原有图片地址 增加修饰和事件 str += '<li class="tu image" ...
- 微信中web页面实现和公众号中查看图片一样的效果
最近开发了一套资讯相关的web页面,嵌套在微信中,可支持点赞.评论等...在文章详情中,图片需要点击放大,随手势放大缩小,左右可滑动切换,总之类似于微信公众号效果. 开始想的方案是用轮播插件.或者在i ...
- H5移动端图片裁剪（base64）
在移动端开发的过程中,或许会遇到对图片裁剪的问题.当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉. 图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都 ...
随机推荐
- windows本地提权对照表（转载）
2003 systeminfo>C:\Windows\Temp\temp.txt&(for %i in (KB3057191 KB2840221 KB3000061 KB2850 ...
- 剑指offer---包含min的栈
思路:该题主要是补充栈的min方法,例如:栈有pop.push.peek等内置方法,每次调用这些方法就能返回个结果或者有个响应,本题意在补充min方法,使得每次调用min方法都能得到栈中最小值,保证每 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE模板页搭建
AdminLTE 官网地址:https://adminlte.io/themes/AdminLTE/index2.html 首先去官网下载包下来,然后引入项目. 然后我们在web层添加区域Admin以 ...
- VS 2017开发插件
codemaid 代码清洁工具 commentsPlus 注释以斜体方式展示,并提供额外的注释格式 viasfora 尖括号颜色设置 reshaper 必备
- Linq to Objects for Java 发布 1.0.1 版本
现在 java 支持 linq 啦.比原生 stream api 更好用,功能更强大.现已发布 version 1.0.1 地址: https://github.com/timandy/linq. A ...
- MySQL Flush导致的等待问题
--MySQL Flush导致的等待问题 -------------------------------2014/07/13 前言 在实际生产环境中有时会发现大量的sql语句处于waiting for ...
- InnoDB: ERROR: the age of the last checkpoint
--InnoDB: ERROR: the age of the last checkpoint ---------------------------------------------------- ...
- c# 函数简述
函数是具有独立功能,并且能够重复使用的代码块.函数必须先声明后调用,使用函数使代码更简洁易读. 一.函数的声明与调用 1.声明格式: static 返回类型 函数名(参数类型 参数名称,参数类型 参数 ...
- DVWA笔记之二:Command Injection
命令注入 1.Low级别 <?php if( isset( $_POST[ 'Submit' ] ) ) { // Get input $target = $_REQUE ...
- ReactiveCocoa源码解读（二）
上一篇解读了ReactiveCocoa的三个重要的类的底层实现,本篇继续. 一.RACMulticastConnection 1.应用 RACMulticastConnection: 用于当一个信号被 ...