如何使用canvas完成图片合成下载
2019-10-15 本文已影响0人
aboyl
最近在群里面看到一个很有意思的提问:
用户希望上传一张海报与另外一个小图片,最后可以下载下来，图片，小图片位于大图片的右下角
这种功能其实还挺常见的,比如生成一个带二维码的海报之类的,就抽时间做了一下
首先分析一下思路
- 要做图片合成,那么必定会使用到canvas
- 怎么进行合成?这个就很简单了?将canvas设置成大图的宽高,绘制大图，再在对应位置绘制小图，那么就得到我们所需要的图案
- 最后需要做的是如何下载，可以使用a标签来完成
具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/rxjs/6.5.2/rxjs.umd.js"></script>
</head>
<body>
<canvas id="combination"></canvas>
<a download id="download">下载</a>
<script>
const src0 = 'http://img5.imgtn.bdimg.com/it/u=3108685336,1951350863&fm=26&gp=0.jpg'
const src1 = 'http://img5.imgtn.bdimg.com/it/u=2221756694,2517784243&fm=26&gp=0.jpg'
const img0 = new Image()
const img1 = new Image()
img0.src = src0
img1.src = src1
// 当两张图都加载好了的时候进行canvas设置
const img0Load$ = rxjs.fromEvent(img0, 'load')
const img1Load$ = rxjs.fromEvent(img1, 'load')
rxjs.zip(img0Load$, img1Load$).subscribe(([e0, e1]) => {
console.log(e0);
const img0 = e0.path[0]
const img1 = e1.path[0]
const imgSrc0 = img0.currentSrc
const imgSrc1 = img1.currentSrc
const img0Width = img0.naturalWidth
const img1Width = img1.naturalWidth
const img0Height = img0.naturalHeight
const img1Height = img1.naturalHeight
const minWidth = Math.min(img0Width, img1Width)
const maxWidth = Math.max(img0Width, img1Width)
const minHeight = Math.min(img0Height, img1Height)
const maxHeight = Math.max(img0Height, img1Height)
const canvas = document.getElementById('combination')
canvas.width = maxWidth
canvas.height = maxHeight
const ctx = canvas.getContext('2d')
let background = new Image()
let minImage = new Image()
// 如果不设置会导致报错
// Tainted canvases may not be exported
// https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported
background.setAttribute('crossOrigin', 'anonymous')
minImage.setAttribute('crossOrigin', 'anonymous')
if (maxHeight === img0Height) {
background.src = imgSrc0
minImage.src = imgSrc1
} else {
background.src = imgSrc1
minImage.src = imgSrc0
}
rxjs.zip(rxjs.fromEvent(background, 'load'), rxjs.fromEvent(minImage, 'load')).subscribe(() => {
// 绘制背景
ctx.drawImage(background, 0, 0, maxWidth, maxHeight)
// 绘制小图
ctx.drawImage(minImage, maxWidth - minWidth, maxHeight - minHeight, minWidth, minHeight);
const downloadImageSrc = canvas.toDataURL("image/png")
document.getElementById('download').href = downloadImageSrc
})
})
</script>
</body>
</html>
下面对代码进行解析
- 请无视rxjs的代码,只要知道他们的作用是:当两张图片都加载完成的时候，执行里面的内容，类似Promise.all
- 使用drawImage来绘制图片，注意第一个参数不是src而是一个image对象
- 注意minImage.setAttribute('crossOrigin', 'anonymous') 这句代码,如果没有这段代码会导致跨域加载图片的问题出现导致 canvas.toDataURL("image/png") 无法执行
可见还是相对比较简单的，在实际开发中并不需要去识别那个是大图那个是小图，一般在上传的时候就决定了，而且一般图片大小都是固定的，所以并不需要使用这么麻烦的rxjs代码
项目地址
