如何從.svg圖像獲取調整大小的ImageElement？

我需要將圖像繪製到從.svg獲取的畫布上。我目前使用下面的代碼：如何從.svg圖像獲取調整大小的ImageElement？

active_toolbutton = query("#${event.target.id}").clone(false); 
active_toolbutton.width = 100; 
active_toolbutton.height = 100; 
context.drawImageScaled(active_toolbutton, placeX, placeY, 
    active_toolbutton.width, active_toolbutton.height);

這與Chrome，但不能在Firefox的工作，有沒有更好的辦法做到這一點？

來源

2013-04-20 João Pinto

這聽起來像飛鏢的錯誤：HTML。請填寫以下所有詳細信息：www.dartbug.com/new – 2013-04-20 20:52:58

完成，https://code.google.com/p/dart/issues/detail?id=10076。 – 2013-04-20 21:22:58

我從來沒有聽說過'context.drawImageScaled'。 'context.drawImage'確實是你想要的，並採用相同的參數？也許這是通過飛鏢的東西？ – 2013-04-22 01:37:40

經過一番研究，我找到了答案。沒有標準的行爲來定義.svg圖像應該使用標量功能進行重新縮放。事實上，有些情況下（例如CSS背景），其中不同的瀏覽器以不同的方式處理縮放比例。

我發現了一個解決方案，即使用第三方JavaScript庫將SVG渲染到畫布中。我使用canvg，使用dart javascript interopt librar。

代碼：

import 'package:js/js.dart' as js; 
... 
    active_toolbutton = new CanvasElement(); 
    active_toolbutton.width = 100; 
    active_toolbutton.height = 100; 
    var options = js.map({ 'ignoreMouse:': true, 
     'ignoreAnimation': true, 
     'ignoreDimensions': true, 
     'scaleWidth': 100, 
     'scaleHeight': 100}); 
    js.context.canvg(active_toolbutton, event.target.src, options);

來源

2013-04-22 09:58:59

如何從.svg圖像獲取調整大小的ImageElement？

回答

相關問題