Search code examples
javascriptimagetile

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

I need a simple way to create larger images from tiles. I found merge-images library here (merge-images) and on safari it displays images but not placed correctly. on chrome I just get error about a tainted canvases. If anyone can suggest solutions I would much appreciate it.

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>

Solution

  • Try to convert the png images to base64 images then pass it to 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 helps you to convert your images

    Hope this works!