Javascript - 合并/覆盖图像

Question

我需要生成一个覆盖两个远程图像的新图像，然后获取生成图像的base64编码。

我发现的大多数解决方案都依赖于这些图像应该位于网站所在的同一台服务器上：

• Merge two dataURIs to create a single image
• Merge Multiple Canvases and Download as Image

然后查看一些来源，我发现有人使用以下基本 URL 来覆盖两个图像：

https://i.vimeocdn.com/filter/overlay?src=url-1&src=url-2

示例：https://i.vimeocdn.com/filter/overlay?src=http://www.backgroundsy.com/file/large/warm-colors-background.jpg&src=https://cdn3.iconfinder.com/data/icons/3d-printing-icon-set/256/Pause.png

这似乎涉及一些 vimeo API。这样做安全吗？

Answer 1

我可能在一篇相关帖子的回答中提供了解决此问题的策略：

https://stackoverflow.com/a/52634041/2888452

但是，我明确地上传了这两个文件，而不是选择外部位置。我不确定跨域协议将如何处理直接从其他域引用的图像。也许您可以使用我创建的提琴手作为起点并尝试引用外部资产？

干杯！