svg - 绘制 SVG 后的 Canvas 'tainted'

标签 svg cross-browser html5-canvas rasterizing taint

已经问过类似的问题,问题的原因很清楚,我要的是替代方案或解决方法:

我想做的是从画有 SVG 文档的 Canvas 中获取数据 URL。我已经尝试了各种方法,但 IE9 和 Chrome 不会让我在 SVG 出现在该 Canvas 附近时立即获得该 URL。

我试过:

  • Canvg(不支持我需要的一切)
  • 将svg文件直接绘制到 Canvas 上(content.drawImage(svg, 0 0))
  • 为整个 svg 文档创建一个 base64 字符串,使其成为 an 的源,然后将该图像绘制到 Canvas 上。
  • 将 svg 保存到一个文件中,设置一个 src 属性指向该文件(在同一域中),然后将其绘制到 Canvas 上

我的想法用完了。

是否有类似的库可以让我尝试将 svg 栅格化? 在绘制之前我是否可以将 SVG 转换为其他东西,以便 Canvas 永远不知道涉及 SVG? 是否有一种非常简单的方法可以使用 PHP 或类似的东西在服务器端进行转换?

最佳答案

如果你想栅格化 SVG,这里有几个项目:

这是一个浏览器兼容性表:

关于svg - 绘制 SVG 后的 Canvas 'tainted',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14614336/

相关文章:

css - 是否有一种 0 宽度的方法来防止 float div 折叠

cross-browser - IE6最小高度困境

html - IE7 页脚重叠

javascript - 如何计算 VU 表刻度的对数标签?

html - 如何使用 CSS 更改 SVG 的高度宽度?

javascript - 在不使用jquery的情况下将g标签添加到svg标签中

html - 随文本宽度缩放的 SVG

javascript - d3.js 条形图不太像我想要的

javascript - 在 Fabric.js 中更改矩形、圆形和图像的描边或描边宽度时出错

javascript - 如何在 HTML5 Canvas 中禁用形状抗锯齿? (imageSmoothingEnabled 和像素化不起作用)