记录点滴

连接https://blog.youkuaiyun.com/u010865136/article/details/90764197

以下案例：包含本地图片上传及图片压缩大致思路：上传图片，读取图片信息及展示缩略图使用的是 FileRender，在图片加载完成后的onload处理函数中，使用canvas进行图片压缩，然后发给后台生成访问图片路径传给前端。关于 canvas.toBlob 请看：https://blog.youkuaiyun.com/qq_42778001/article/details/106522594<input type="file" id="file"><div id="img-box

HTMLCanvasElement：是所有 <canvas> 元素的代称（可以理解为是<canvas>标签的爹O(∩_∩)O哈哈~）。类似的还有：HTMLDivElement -> 对应<div> 标签、HTMLImageElement -> 对应<img> 标签、HTMLParagraphElement 对应 <p>标签，几乎所有的标准HTML元素都对应有接口名称，然后全部都继承于：HTMLElement，完整的继承关系，下.

先科普下什么是URL：MDN - 统一资源定位器（URL）是指在Internet上可以找到资源的位置的文本字符串。通俗点说就是浏览器上边的地址。URL也可以用于文件传输（FTP），电子邮件（SMTP）和其他应用。组成部分：一个URL由不同的部分组成，其中一些是必须的，而另一些是可选的。让我们以下面这个URL为例看看其中最重要的部分：<!-路径->http://www.example.com:80/path/to/myfile.html?key1=value1&am

File API是h5中加入的。1、作用：可以读取本地文件内容；2、操作方式：通过<input type="file"> 或 通过拖拽来选择本地文件。3、使用：监听input的change 事件，在事件对象中的target里，有个files属性，值是一个类对象，里边装的就是文件的一些信息，分别是：name：文件名称，只读字符串。size：以字节数为单位的文件大小。type：文件的MIME类型，只读字符串，档类型不确定时，为 ""。（相当于文件类型）<inp