年前做了一个合成图片的小工具，需求大体为：用户输入要在一整张大图片显示的文字、图片及它们所在大图的坐标，合成一张大图用来干啥干啥。
做法当然是用canvas做的。canvas就不细说了，来说说他的坑吧。
坑之一：输入的文字和坐标都是标准的，但是文字就是不给你在标准展示，坐上偏上。
原因：canvas插入文字的坐标（x，y）, 不是左上角相对于画布的坐标，是左下角相对于画布的坐标
（1）x:文字左边相对于画布的坐标
（2）y:文字下面相对于画布的坐标，但是，这个y有个baseline的限制，如果需要严格的上下居中时，需要设置一下它的baseline.ctx.textBaseline
坑之二：canvas转化为base64图片时，画布上如果有不在统一域名的图片会报错
解决方法：
需要设置跨域的图片允许跨域
Image.setAttribute(‘crossOrigin‘, ‘anonymous‘);
crossOrigin="anonymous"在img标签里设
但是也存在设置了属性后还报错的情况，这时候你要看看是不是同时请求了同一张图片，这种情况下，第一次请求图片他会带请求头，第二次请求这张图片时，他会直接取缓存中的数据，然后就挂了。
有篇文章介绍的特别好，但是我找不到了，就记着，这玩意还有一种情况跟cdn有关，也是会拿缓存，解决方法是请求的src地址上加时间戳