如何从.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？

回答

相关问题