javascript - 如何将两张图片合并为一张?

标签 javascript html canvas svg d3.js

我正在做的是将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/

相关文章:

javascript - javascript eval() 函数内的 HTML 标签

javascript - 如何找出屏幕底部和最底部 HTML 内容之间的间隙?

php - Codeigniter 重复模板

html - 为什么在 Eclipse 中获取 Vaadin Elements 警告 "Unknown tag"

javascript - react |在jsx中渲染html标签

javascript - Canvas 消失

javascript - 如果 mData 为 null,jQuery DataTable : Callback function(fnUpdate, fnCreatedCell 等)将不起作用

javascript - 向复选框添加内容

html - 如何在 html5 中制作透明 Canvas ?

javascript - 使用 Canvas 或自定义 html 结构创建 html5 游戏是否正确