使用javascript將html內容轉換爲圖像

Question

我有一個div元素，其中包含兩個或三個圖像。其中一個圖像是通過一定比例和旋轉進行變換的。我只是想將整個div轉換爲單個圖像。我用html2canvas，我是一個很大的粉絲，但我的問題是，具有變換屬性的圖像在所有瀏覽器中都不相同，它在Chrome中正常工作，但不在Mozilla和IE.I中也使用最新版本的html2canvas轉換支持。你可以建議我另一種方法來轉換div到圖像只使用JavaScript而不是jQuery。

Answer 1

如果你只是需要這個圖像和需要跟蹤變換，那麼我會建議只使用畫布。

在該div內插入一個畫布元素而不是圖像，然後用相應的變換（平移，旋轉等）將它們繪製到需要的圖像上。從那裏只需撥打toDataURL()即可將所有內容保存爲單個圖像。

注意CORS限制適用（圖片必須從同一個服務器頁面，或獲准加載到由託管服務器使用外CORS - 唯一的例外是通過輸入字段上傳的圖片）。

對於如何設置畫布和使用旋轉/變換繪製圖像，SO上存在很多示例。