canvas合成图片的各种坑

做南航三八妇女节推广活动时,用到了canvas合成图片和文字:

图中墨菲为微信授权登录获取的用户昵称

坑1:

页面中使用了网络字体,canvas中所引用的字体必须在文档流中有其他标签(span,p等)引用该字体!!!否则无法使用…

坑2:

必须再等到字体下载完成之后再去渲染canvas,字体才能有作用(这个是废话,不过一般中文字体包都比较大,如果不注意可能执行js代码的时候字体文件还没有下载完成)

坑3:

canvas连续draw图片的时候,需要一定间隔,这个问题是在IOS发现的,使用Android没有问题,IOS有时会出现之后draw没有绘制成功的问题,加间隔后解决

坑4:

canvas绘制图片进行拉伸等操作会造成图片失真,不改变图片默认大小绘制不失真

如需将canvas绘制的图片长按保存,参考微信中如何长按图片保存的是另一张图片

在向canvas上下文绘制图片时,可以直接使用new Image(),不一定要使用实体img标签

将Data URL(base64)放入img的src时候,如果img样式设置宽高,不会影响图片质量,下载下来的图片仍然是原图大小