Google HTML5訓練營：圖片旋轉牆

時間 2019-11-18

標籤 google html5 html 訓練營圖片旋轉欄目 Google 简体版

原文原文鏈接

六月末，第一次去參加Google的HTML5訓練營，估計其餘同窗多少都接觸過。從下午一點到晚上10點，將近9個小時的時間裏，首先由杜歡、寒蕊、胡坤作了一些技術上的分享，我對Google工程師寒蕊MM的CSS 3D Transforms內容比較感興趣，在後面選擇命題的時候，選擇作一個圖片展現的東東，最後命名：圖片旋轉牆。html

咱們最後合做的成員有：韋益，方有亮，鄧佑華，姜志超，喬傑，盛慶鴻，馮尚實（本身），你們都來自不一樣的公司，爲了一種興趣跟愛好，來這裏相聚，收穫都挺多。咱們討論技術實施方案，最後肯定用Drag&Drop實現本地圖片拖拽，用File API 跟FileReader API實現文件的讀取，再用寒蕊MM分享的3D Transforms進行圖片旋轉展現。也是根據實施方案，咱們把7我的分紅3組，分別領取三塊任務，由於時間較緊，因此最後的做品也比較粗糙，只是實現了基本功能。猛擊這裏查看效果：http://enjoyhtml5.com/hackathons/20110626/photo-gallery/index.html （用Chrome 12+打開）html5

這裏我只詳細講我完成的部分：Drag&Drop 以及File API 、FileReader API這兩塊內容。瀏覽器

1、Drag&Drop事件學習

      dragstart：拖拽元素開始拖拽時觸發，觸發對象：拖拽元素；
      dragenter：拖拽元素進入目標元素時觸發，觸發對象：目標元素；
      dragover：拖拽元素在目標元素上移動時觸發，觸發對象：目標元素；
      dragleave：拖拽元素離開目標元素時觸發，觸發對象：目標元素；
      drop：拖拽元素放在目標元素內時觸發，觸發對象：目標元素；
      dragend：拖拽元素拖拽完成時觸發，觸發對象：拖拽元素；編碼

上圖是各瀏覽器對Drag&Drop的支持狀況。題外：竟然IE6-8都支持耶，這個仍是HTML5的東東嗎？哈哈spa

咱們從桌面上拖拽圖片（其餘文件亦可）到瀏覽器，其實咱們只用到了目標元素，就是說，把圖片放到一個容器裏，觸發這個容器（拖拽目標元素）的事件，而後使用下面要提到的File API 、FileReader API，就能夠把圖片數據讀取出來。orm

      爲了容器（拖拽目標元素）更大一些，咱們把整個視窗做爲容器，這樣圖片只要進入了視窗就能夠操做了。
      HTML結構代碼：

      CSS樣式代碼：

      到此，咱們把結構跟樣式已經定義好了，下面咱們繼續講File API跟FileReader API，等講完這塊內容，咱們再加上JS代碼部分。htm

2、File 跟 FileReader對象

在W3C的草案裏，Javasript被容許能夠獲取文件的名稱、大小、文件類型等信息了，而且也容許經過一些不一樣的方式，得到文件的內容，部分瀏覽器已經開始支持這一特性，好比：Chrome，你懂得。。。接口

      拖拽圖片（文件），咱們能夠偵聽容器的事件，經過事件的dataTransfer得到圖片（文件）信息；dataTransfer對象的屬性和方法：
      dataTransfer.effectAllowed[=value]：返回容許的拖拽效果。該屬性能夠修改，可選的值：none|copy|copyLink|copyMove|link|linkMove|move|all|uninitialized；
      dataTransfer.dropEffect[=value]：返回實際的拖拽效果，若是該值與effectAllowed設置不一致，則拖拽失敗。該屬性能夠修改，可選的值：none|copy|link|move；
      dataTransfer.types：返回在dragstart觸發時存儲數據的類型。若是是桌面文件拖拽，則返回files；
      dataTransfer.setData(format, data)：添加指定格式的數據；
      dataTransfer.getData(format)：返回指定格式的數據，若是數據不存在，則返回空字符串；
      dataTransfer.clearData([format])：刪除指定格式（可選）的數據；若是未指定格式，則刪除全部數據；
dataTransfer.files：返回正在拖拽文件列表（fileList）；

再來看看FileReader API
W3C定義：「FileReader接口是提供一些讀取文件的方法和一個包含讀取結構的事件模型。」

      FileReader的方法：
      abort：中斷讀取；
      readAsBinaryString(file)：將文件讀取爲二進制碼；
      readAsText(file[, encoding])：將文件讀取問文本，encoding爲文本編碼，默認UTF-8；
      readAsDataURL(file)：將文件讀取爲DataURL，圖片文件使用這個比較合適，咱們在作的時候用到了這個方法；

      FileReader的事件：
      onabort：中斷操做時觸發；
      onerror：讀取出錯時觸發；
      onload：成功讀取時觸發；
      onloadend：完成讀取時觸發，不論成功與否；
      onloadstart：開始讀取時觸發；
      onprogress：讀取中觸發；

文件一旦開始讀取，不論成功與否，實例的result屬性都會填充，若是失敗，則result的值爲null，不然result保存着讀取的值，咱們就是須要這個值。

3、JS代碼實例

4、注意事項

一、瀏覽器兼容。咱們在這裏使用了if語句進行了判斷，能夠檢測FileReader是否支持；
二、取消默認行爲。咱們在dragover時，取消了元素的默認行爲，不至於拖拽一張圖片後頁面重定向；

5、能夠完善的一些方向

      一、HTML5本地存儲。咱們把桌面拖動來的文件，用localStorage進行本地存儲，這樣下次打開頁面，能夠繼續照片的展現；
      二、支持其餘頁面圖片拖拽；
      三、其餘；

好好學習，努力實現好的應用，推廣最新的技術。o_o