我正在做的是将D3.js生成的图表(图表图例的HTML + 图表主体的SVG)转换为图像,现在我同时使用html2canvas并手动将SVG转换为图像数据,原因是因为html2canvas 只能处理 SVG 内的 html 部分和文本元素。
所以我的问题是:
一旦我有了两个图像数据(svg部分就像:'data:image/svg+xml;base64,'+ btoa(svg);
(我可以通过构建图像对象将其转换为类似的 data-url 并将其绘制在 Canvas 上),html部分来自 canvas.toDataURL
),我如何将它们合并在一起以获得完整图像
/////////////// /////////////// ///////////////
/ / /////////////// / /
/ / /////////////// / /
/ / + /////////////// = / /
/////////////// /////////////// ///////////////
/////////////// / / / /
/////////////// /////////////// ///////////////
我猜 Canvas 可能有能力(叠加模式)合并多层,但我不知道如何做到这一点。因此,任何代码示例都值得赞赏。
最佳答案
我认为你可以做的就是将图像源写入 Canvas ,然后使用 Canvas 合成操作。这样您就可以使用最适合您需要的方法叠加两个图像。
以下是一些使用 globalCompositeOperation
的示例
http://blogs.adobe.com/webplatform/2014/02/24/using-blend-modes-in-html-canvas/
关于javascript - 如何将两张图片合并为一张?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30579739/