富文本編輯器的內容轉換成圖片

需求：pc端通過富文本編輯器，編輯商品詳情頁，然後生成圖片，用於移動端展示之用。

用到的庫：wangEditor5和Dom-to-image（後者沒找到官網，使用方法可自行百度，相關博客還是比較多的）

常規科普：

  1.wangEditor 編輯器綁定的valueHtml即爲字符串形式的dom結構。我們解碼後可直接預覽效果；

  2.利用dom-to-image庫實現dom到圖片的轉化，顧名思義。（本來選的是HTML2cancas 庫，但是截圖白邊問題，圖片無法自適應問題，縮放無法使用等等，

   快把人搞崩潰了，所以換了dom-to-image這個庫，當然也有坑，後面再說。。）

 

我自己寫了一個demo。放在我的碼雲裏了，需要的小夥伴請自行下載，如果對你有幫助，歡迎star，fork或評論。

地址：https://gitee.com/okwufeng/rich-text-editor.git

ps: dom-to-image目前發現的坑就是點擊生成圖片後，原有編輯器的區域滾動條消失了，導致想修改的話沒法滾動，

個人理解這個原因：正常情況下，截圖無法截取到滾動條可見區域以外的部分，爲了截取全部，就取消了滾動條，並且溢出隱藏了，所以出現這種情況。

不過不要慌，代碼裏面我已經做了相應處理，就是生成之前給個提示 “ 點擊生成圖片後，編輯器將置空，是否確認？ ”，感覺這樣子交互就友好多了！

好了，先寫這麼多，有問題可以評論交流。