canvas - 如何从.svg图像中获取调整大小的ImageElement？

Question

我需要将图像绘制到从.svg获得的 Canvas 中。
我目前正在使用以下代码:

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，有更好的方法吗？

Answer 1

经过研究，我找到了答案。没有标准行为定义.svg图像应使用其标量功能进行重新缩放。实际上，在某些情况下(例如CSS背景)，不同的浏览器会以不同的方式处理缩放比例。

我已经找到了一种解决方案，该解决方案是使用第三方javascript库将SVG渲染到 Canvas 中。我已将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);