2018-05-23

图片上传

form上传

ajax上传

FileReader

利用FileReader对象,将input中的file对象,以base64转码的形式读取出来

window.URL.createObjectURL + canvas

• ,部分手机没有相机功能,必须加上accept='image/*'才能调用相机,然而accept='image/*' 没法使用 fileReader,因此只能使用window.URL.creatObjectURL;
• creatObjectURL是浏览器自带的接口,性能相对来说较好,处理更快;
• 低版本浏览器图片预览只能用滤镜了...
• canvas主要做了图片压缩(drawImage())以及图片转base64(toDataURL())功能.

遇到的问题

1. 相机拍照后上传图片没反应.
   原因:使用了accept='image/*',导致无法使用fileReader,取不到图片,直接报错.
   解决:将fileReader换成window.URL.creatObjectURL.
2. 相机拍照上传图片,报413 request Entity too Large错误.
   原因:图片过大.
   解决:利用 canvas做图片压缩处理,3M的图片压缩完后大概200多KB.

复制粘贴

Clipboard.js

复制

js原生简单实现,直接调用document.execCommand('Copy');即可.
execCommand API、 Selection API

Passive

Passive Event Listeners,为了解决浏览器页面滑动流畅度而设计的,它通过扩展事件属性passive让Web开发者来告知浏览器监听器是否会阻止事件的默认行为,从而让浏览器可以更智能地决策并优化.

target.addEventListener(type, listener[, useCapture, wantsUntrusted  ]);  
useCapture 参数用来控制监听器是在捕获阶段执行还是在冒泡阶段执行,true 为捕获阶段,false 为冒泡阶段,默认false 
// 由于第三个参数没有传值,那么默认就是 false,事件会在冒泡阶段被处理  
document.addEventListener("touchstart", function(e){  
    // do sth.  
});  

• 如果我们在事件处理函数中调用了 stopPropagation(),那么之后的元素就无法接收这个事件,也即是剩余的事件处理函数永远不会得到执行;
• 如果我们在事件处理函数中调用了 preventDefault(),那么元素的默认行为就会被取消。
  eg:一个 a 标签绑其 click 事件的默认行为是跳转到 href 指定的链接,但是如果我们在click事件处理函数里面调用了 preventDefault 方法后,其默认的的行为就被取消了。
• 那么问题来了：由于浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault(),它需要等到事件处理函数执行完后,才能去执行默认行为,然而事件处理函数执行是要耗时的,这样一来就会导致页面卡顿.所以passive就出现了.

 document.querySelector('.scroll-wrap').addEventListener('touchstart', listener, {passive: true});
 document.querySelector('.scroll-wrap').removeEventListener('touchstart', listener);

• 通过传递 {passive: true} 来明确告诉浏览器,事件处理程序不会调用 preventDefault 来阻止默认滑动行为

• vue中passive修饰符

...
vue(2.3.0) 以 { passive: true } 模式添加侦听器