我正在开发一个图像编辑器，我必须创建一些应用于 RaphaelJS 图像的像素操作方法。我正在考虑使用 Pixastic 库进行像素操作。
问题是我无法将 RaphaelJS 图像链接到 Pixastic，因为 RaphaelJS 创建了一个 SVG 元素并且 Pixastic 需要一个“img”标签。
我尝试过这样的事情，但没有成功
img = r.image("Assets/test.jpg", 40, 40, 260, 150);
img.node=Pixastic.process(img.node, "desaturate");
目前确实没有一种简单的方法可以做到这一点。如前所述，在许多浏览器中，您可以输出到 Canvas，然后执行像素级转换，但是从 SVG 到 Canvas 的这种转换是破坏性的，因为您已经从保留模式上下文转到即时模式上下文，因此您失去保留模式 API 的所有细节，例如能够在单个形状上注册事件侦听器，或者具有用于转换单个形状（或形状组）的高级 API。
但是，如果您不需要元素级事件处理，您可以查看dojox.gfx库，它提供了一个高级的、保留模式、受 SVG 启发的 API 用于绘制形状，而且还有一个 Canvas 后端（VML 和 Silverlight 也是）。我相信在使用 Canvas 输出时无法在单个形状上注册事件侦听器，但您可以在根画布元素上注册事件处理程序。然后可以使用 Pixtastic 应用转换，但您可能需要稍微修改一下 dojox.gfx Canvas 渲染代码。
您还可以查看 SVG 过滤器，它与 SVG 获得的对像素级、光栅图形样式操作的原生支持一样接近。
我也相信他们目前正在尝试将这两个规范结合起来以使这样的工作成为可能： http: //lists.w3.org/Archives/Public/public-canvas-api/2011AprJun/0117.html
您可以尝试将 svg 绘制到本文末尾附近的画布元素检查https://developer.mozilla.org/en/drawing_graphics_with_canvas。然后将画布输出到 base 64 编码图像。没有与 RaphaelJS 或 pixastic 合作过，我不确定这会有多好。