使用 merge-images.js 合并图像 1) 放置不正确 2) 在 chrome 上给出 "tainted" 错误

Question

我需要一种简单的方法来从图块创建更大的图像。我在这里 (merge-images) 找到了合并图像库，在 safari 上它显示图像但未正确放置。在 chrome 上，我刚收到有关受污染画布的错误消息。如果有人可以提出解决方案，我将不胜感激。

mergeImages([
             { src: 'https://tile.openstreetmap.org/7/63/42.png', x: 0, y: 0 },
             { src: 'https://tile.openstreetmap.org/7/64/42.png', x: 256, y: 0 },
             { src: 'https://tile.openstreetmap.org/7/64/43.png', x: 254, y: 256 },
             { src: 'https://tile.openstreetmap.org/7/63/43.png', x: 0, y: 256 }
             ])
             .then(b64 => document.querySelector('img').src = b64);

<script src="https://unpkg.com/merge-images"></script>
<img crossOrigin="Anonymous"/></img>

Answer 1

尝试将 png 图像转换为 base64 图像，然后将其传递给 mergeImages。

mergeImages([
             { src: base64 image, x: 0, y: 0 },
             { src: base64 image, x: 256, y: 0 },
             { src: base64 image, x: 254, y: 256 },
             { src: base64 image, x: 0, y: 256 }
             ])
             .then(b64 => document.querySelector('img').src = b64);

Base64 Image Encoder 帮助您转换图片

希望这有效！

使用 merge-images.js 合并图像 1) 放置不正确 2) 在 chrome 上给出 "tainted" 错误

merging images with merge-images.js 1) does not place correctly and 2) gives "tainted" error on chrome

javascript

image

tile