如何使用canvas完成图片合成下载

最近在群里面看到一个很有意思的提问:
用户希望上传一张海报与另外一个小图片,最后可以下载下来，图片，小图片位于大图片的右下角

这种功能其实还挺常见的,比如生成一个带二维码的海报之类的,就抽时间做了一下

首先分析一下思路

1. 要做图片合成,那么必定会使用到canvas
2. 怎么进行合成?这个就很简单了?将canvas设置成大图的宽高,绘制大图，再在对应位置绘制小图，那么就得到我们所需要的图案
3. 最后需要做的是如何下载，可以使用a标签来完成

具体代码

  
  
  
  
  



  
  下载
  

下面对代码进行解析

1. 请无视rxjs的代码,只要知道他们的作用是:当两张图片都加载完成的时候，执行里面的内容，类似Promise.all
2. 使用drawImage来绘制图片，注意第一个参数不是src而是一个image对象
3. 注意minImage.setAttribute('crossOrigin', 'anonymous') 这句代码,如果没有这段代码会导致跨域加载图片的问题出现导致 canvas.toDataURL("image/png") 无法执行

可见还是相对比较简单的，在实际开发中并不需要去识别那个是大图那个是小图，一般在上传的时候就决定了，而且一般图片大小都是固定的，所以并不需要使用这么麻烦的rxjs代码

项目地址

图片合成