HTML5 file对象和blob对象的互相转换
<h1 id="html5-file对象和blob对象的互相转换">HTML5 file对象和blob对象的互相转换</h1><blockquote>
<p>最近在做一个裁剪图片的需求，基于vue和elementui，裁剪完图片遇到一个坑，elementui的upload组件接受一个promise，要求promise resolve一个File对象才可以使用新文件上传，而canvas是转成了blob对象，我google查了好久，没有发现有blob对象转File的文章，所以今天来写一个吧！</p>
</blockquote>
<h2 id="使用filereader-对象转换：file--dataurl">使用FileReader 对象转换：File => DataURL</h2>
<p>该对象用于读取文件（读取单个对象文件，所以，不能直接读取 Filelist 对象文件集合），即把文件内容读入内存。它接收 File 对象或 Blob 对象，作为参数。</p>
<h5 id="生成该对象的构造函数方法如下：">生成该对象的构造函数方法如下：</h5>
<pre><code class="language-javascript"><span class="hljs-keyword">var reader = <span class="hljs-keyword">new <span class="hljs-type">FileReader(); <span class="hljs-comment">// 参数为 Blob 对象或 File 对象</span></span></span></span></code></pre>
<h5 id="对于不同类型的文件，filereader-使用不同的方法读取。方法如下：">对于不同类型的文件，FileReader 使用不同的方法读取。方法如下：</h5>
<ul>
<li>readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个 0 到 255 之间的整数。</li>
<li>readAsText(Blob|File, opt_encoding) ：返回文本字符串。默认情况下，文本编码格式是'UTF-8'，可以通过可选的格式参数，指定其他编码格式的文本。</li>
<li>readAsDataURL(Blob|File)：返回一个基于 Base64 编码的 data-uri 对象。</li>
<li>readAsArrayBuffer(Blob|File) ：返回一个 ArrayBuffer（数组缓存）对象。</li>
<li>abort()：该方法用于中止文件上传。</li>
</ul>
<h5 id="下面是获取上传对象的文本内容的方法：">下面是获取上传对象的文本内容的方法：</h5>
<pre><code class="language-javascript"> <span class="hljs-keyword">var reader = <span class="hljs-keyword">new FileReader();
reader.onload = <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">e){
<span class="hljs-comment">// target.result 该属性表示目标对象的DataURL
<span class="hljs-built_in">console.log(e.target.result);
}
<span class="hljs-comment">// 传入一个参数对象即可得到基于该参数对象的文本内容
reader.rederAsDataURL(file);</span></span></span></span></span></span></span></span></code></pre>
<h2 id="利用canvas剪切图片">利用canvas剪切图片</h2>
<p>CanvasRenderingContext2D.drawImage() 是 Canvas 2D API 中的方法，它提供了多种方式来在Canvas上绘制图像，我们使用drawImage方法节剪切图片。</p>
<h5 id="先从canvas获取剪切过的图片dataurl">先从canvas获取剪切过的图片DataURL</h5>
<pre><code class="language-javascript"> <span class="hljs-comment">// 获取canvas
let ctx = <span class="hljs-keyword">this.$<span class="hljs-built_in">refs.canvas.getContext(<span class="hljs-string">'2d')
<span class="hljs-comment">// 获取图片dom元素
let image = <span class="hljs-keyword">this.$<span class="hljs-built_in">refs.image
<span class="hljs-comment">// 裁剪图片200 * 200图片
ctx.drawImage(image, x, y, w, h, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">200, <span class="hljs-number">200)
<span class="hljs-comment">// canvas生成剪切过的图片DataURL
<span class="hljs-keyword">this.cutAvater = <span class="hljs-keyword">this.$<span class="hljs-built_in">refs.canvas.toDataURL()</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<p>具体的裁剪方法我下篇文章会写</p>
<h5 id="将dataurl转换为blob对象">将dataurl转换为Blob对象</h5>
<pre><code class="language-javascript"> <span class="hljs-keyword">let arr = this.cutAvater.split(<span class="hljs-character">',')
<span class="hljs-keyword">let data = window.atob(arr<span class="hljs-literal">[<span class="hljs-number">1])
<span class="hljs-keyword">let mime = arr<span class="hljs-literal">[<span class="hljs-number">0].<span class="hljs-keyword">match(/:(.*?);/)<span class="hljs-literal">[<span class="hljs-number">1]
<span class="hljs-keyword">let ia = <span class="hljs-keyword">new <span class="hljs-constructor">Uint8Array(<span class="hljs-params">data.<span class="hljs-params">length)
<span class="hljs-keyword">for (var i = <span class="hljs-number">0; i < data.length; i++) {
ia<span class="hljs-literal">[<span class="hljs-identifier">i] = data.<span class="hljs-built_in">char<span class="hljs-constructor">CodeAt(<span class="hljs-params">i)
}
this.blob = <span class="hljs-keyword">new <span class="hljs-constructor">Blob([<span class="hljs-params">ia], {<span class="hljs-params">type: <span class="hljs-params">mime})</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h2 id="利用file-api讲blob转成file对象">利用File Api讲blob转成File对象</h2>
<p>其实我google找了一圈只有 File => Blob，没人写怎么用Blob => File 最终我在File中找到了File()构造函数</p>
<pre><code class="language-javascript"> <span class="hljs-keyword">let files = <span class="hljs-keyword">new window.<span class="hljs-constructor">File([<span class="hljs-params">this.<span class="hljs-params">blob], <span class="hljs-params">file.<span class="hljs-params">name, {<span class="hljs-params">type: <span class="hljs-params">file.<span class="hljs-params">type})</span></span></span></span></span></span></span></span></span></span></code></pre>
<p>File()构造函数的前两个参数为必传</p><br><br>
来源：https://www.cnblogs.com/wsj1/p/14554356.html
頁:
[1]