chrome 上传图片 fakepath

在做一个 读取本地图片然后dramimage到canvas上的一个案例。

原本思路

通过input file 读取图片，然后监听 input 的 change 事件。通过读取event.target.value属性来获取图片路径。

结果不管路径在哪，取到的结果都是    C:/fakepath/1.jpg

上网搜了好久，终于知道无法获取路径的原因。 是因为安全限制，浏览器不会提供真实的文件路径。

解决办法

这里要用到h5的新api  FileReader


代码如下

var _img = new Image();
 var fr = new FileReader();
fr.onload = function () {
      _img.src = fr.result;
}
 _img.onload=function () {
      _layer.context.drawImage(_img,40,100,300,600);
 }
 fr.readAsDataURL(data.data.originEvent.target.files[0]);

（这里有点疑问的地方是我在控制台看到files[0]里面其实并没有多少东西（或者说是生成文件所必要的信息），可它的确是生成文件了）