在做一個 讀取本地圖片然后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]里面其實并沒有多少東西（或者說是生成文件所必要的信息），可它的確是生成文件了）