詳細介紹透過HTML5的Drag和Drop產生拓樸圖片Base64資訊的案例

HTML5 原生的Drag and Drop是很不錯的功能，本文將搞個有點使用價值的例子，透過Drag and Drop產生圖片的Base64的字串資訊。文件避免多次http請求，可以避免WebGL例子跨網域存取的安全限制無法本地文件運行等好處，當然弊端也不少例如不能有效利用瀏覽器圖片快取機制等。例子很多註冊圖片都採用Base64的方式，這主要是為了方便用戶直接本地文件打開HT的手冊即可操作瀏覽，無需構建web服務器發布進行訪問，用戶常問然後將圖片轉出Base64信息，我們使用的就是本文介紹的小工具。本地多圖片檔案到任意頁面部分，HT自動將圖片資訊產生對應的Data

Model

資料

模型

，清單顯示

圖片效果、名稱和寬高信息，拓撲顯示圖片、修改時間和文件大小等信息，文本框生成對應註冊到htDefault.setImage

函數的代碼片段，用戶直接可以將文本框內的代碼拷貝到自己的工程的js文件進行使用。 ();阻止預設行為，我們只需在最後的drop事件中透過e.dataTransfer.files得到所有當前拖曳文件信息，構建FileReader進行加載，然後對加載的資訊建構對應DataModel中的ht.Node物件和屬性就完事了。提到，左側list列表透過自訂向量圖

標，並且在定義向量時採用了clip的功能，這樣清單的圖示就會顯示成clip裁剪後的圓形效果。 listView.drawRowBackground函數，實現隔行變色的清單效果。重載了listView.getLabel顯示了更多的動態文字資訊。透過listView.setVisibleFunc過濾不顯示連線資訊在清單中。

以下為該Base64轉換工具的操作效果影片和抓圖供參考：

以上是詳細介紹透過HTML5的Drag和Drop產生拓樸圖片Base64資訊的案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！