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

Question

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

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 背景），不同的浏览器会以不同的方式处理缩放。

我找到了一个解决方案，即使用 3rd 方 javascript 库将 SVG 渲染到画布中。我使用了 canvg和 dart javascript interopt 库。

编码：

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);