昨天才把html節點中的圖片轉成base格式的，今天就發現一個用戶體驗的問題；那麼是啥呢？就是我從左側的樹形菜單中拖拽節點的時候（滑鼠按下也是同樣問題），發現節點的圖片區域那裡會出現一個邊框，持續時間不是很長，就幾毫秒的時間，但是當你連續拖拽幾個不同節點的時候就會發現這個邊框竟然又消失不見了，如果此 ...
昨天才把html節點中的圖片轉成base格式的，今天就發現一個用戶體驗的問題；那麼是啥呢？就是我從左側的樹形菜單中拖拽節點的時候（滑鼠按下也是同樣問題），發現節點的圖片區域那裡會出現一個邊框，持續時間不是很長，就幾毫秒的時間，但是當你連續拖拽幾個不同節點的時候就會發現這個邊框竟然又消失不見了，如果此時重新進入頁面，再開始拖動節點，圖片的邊框又出現了。
問題排查
- 是否是官方節點自帶的邊框？如果是，配置項是什麼？
- 圖片的預設邊框是否被清除？還是外圍元素的邊框導致？
- 圖片的載入時機？
- 是否是轉base64的問題，畢竟在這之前沒有這個情況發生……
帶著這些問題，第一時間去翻閱了官方文檔，發現沒有和這個問題相關的配置項，即使有設置了也不管用；然後就把問題拋到了交流群裡面，發現壓根沒人回答……，那就只能開始第二個方案了：把圖片的預設邊框都去除掉，比如border，box-shadow，outline這些屬性都去除掉了，發現還是沒用；好吧，開始第三套方案：使用new Image處理圖片的載入時機問題，嗯！不出意外的話，這個方法還是不行
定位問題
經過上面四個方案的嘗試後，我大概知道了問題的源頭在哪邊了，那就是我自定義html節點中圖片地址賦值的地方，由於
DataUri.imageToDataUri這個方法是個非同步執行的，所以才會導致在渲染的時候會出現短暫的視覺差
解決問題
- 先給圖片賦值個普通的地址（非base64的地址）
- 在
DataUri.imageToDataUri的回調中再把圖片的src替換成base64的
const container_img = document.createElement('img');
container_img.setAttribute('class', 'cu-container-img');
container_img.setAttribute('alt', '節點ico');
container_img.style.cursor = 'pointer';
// 先用遠程圖片地址給圖片的src賦值，然後再重新賦值成base64的格式；這麼做的目的就是解決節點拖拽到畫布上會出現短暫的邊框閃動問題，如果你要復現這個邊框，可以把下麵這一行代碼註掉（不是必現）
container_img.src = img;
// 把圖片轉成base64方便存儲到後端
DataUri.imageToDataUri(img, function (nu, url) {
// 第一個參數無效，用的只是第二個參數，但是第一個參數不寫由不行
container_img.src = url;
});
