在做一个 读取本地图片然后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]里面其实并没有多少东西（或者说是生成文件所必要的信息），可它的确是生成文件了）
网友评论