vue图片裁剪插件vue-cropper使用 （FileReader 函数 | URL.createObjectURL 方法）

感觉这个挺有意思的，所以就弄了，也需要了几个知识点，顺带学习了，记录一下。

主要用到的是 vue-cropper 截图插件，具体的安装，引入，使用请看 vue-cropper官方文档 ，很详细了，这里不赘述。

效果如图：

在硬菜之前先来点前菜吧，使用中遇到的东西，记录一下：

1，FileReader 函数 

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

 FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。

通俗来讲，FileReader 函数是用来异步读取计算机上的文件的，可以将文件读取为不同的形式，具体读取形式取决于使用何种方法：

• 将选择文件读取为 ArrayBuffer 数据对象：FileReader.readAsArrayBuffer()
• 将选择文件读取为原始二进制数据：FileReader.readAsBinaryString()
• 将选择文件读取为URL格式的Base64字符串：FileReader.readAsDataURL()
• 将选择文件读取为字符串：FileReader.readAsText()

 详细内容请看： FileReader()  MDN，

 2，URL.createObjectURL 方法

URL.createObjectURL静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

该方法的参数：用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

通俗来讲，URL.createObjectURl方法用于为传入该方法的参数对象创建URL，可以干什么呢，比如预览(赋值给img的src属性)，下载(a标签href属性)。

详情内容请看： URL.createObjectURL  MDN。

关于以上两种方法的使用参见下面的图片截取操作。

更多内容推荐一篇文章： Blob、File、FileReader 和 Data URL。

上硬菜：

 以上就是基本操作了，详细信息还是看官方文档吧。