Javascript 将图像与merge-images.js合并1)放置不正确,2)给出;污染的;chrome上的错误

Javascript 将图像与merge-images.js合并1)放置不正确,2)给出;污染的;chrome上的错误,javascript,image,tile,Javascript,Image,Tile,我需要一个简单的方法从瓷砖创建更大的图像。我在这里找到了merge images library(),在safari上它显示图像,但位置不正确。在chrome上,我刚刚得到一个关于污染画布的错误。如果有人能提出解决方案,我将不胜感激 合并图像([ {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:

我需要一个简单的方法从瓷砖创建更大的图像。我在这里找到了merge images library(),在safari上它显示图像,但位置不正确。在chrome上,我刚刚得到一个关于污染画布的错误。如果有人能提出解决方案,我将不胜感激

合并图像([
{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}
])
.然后(b64=>document.querySelector('img').src=b64)

尝试将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);
帮助您转换图像


希望这能奏效

您是否需要将图像合并为一个图像,或者仅显示正确定位的图像就足以满足您的需求?如果是这样的话,你可以使用CSS做同样的事情,而不用担心浏览器不兼容(这是未来的证明)。不幸的是,我需要它们作为一个图像好吧,那么你显然不能使用这个库。你说它在Safari和Chrome上失败了,我也在IE上试过,但也失败了。我怀疑这是因为源图像来自不同的域,而在目标图像中设置crossOrigin属性不会改变这一点。我能想到的唯一解决方案是编写一个服务器端库来为您下载和合并图像。你有使用ASP.Net或PHP的经验吗?