首页 > 如何合并多个canvas图像?

如何合并多个canvas图像?

比如页面里存在2个canvas的话,要如何使他们合成为1个canvas?


通过getImageData取两个canvas的imageData。iamgeData每4个步长代表一个像素点的数据,分别对应rgba中的四个值。
合并肯定需要一个策略,比如取每个点的rgba值得平均值,根据这个策略得到每个像素点如何计算得出合并后的像素点的数据。得到一个合并的iamgeData,
然后通过putImage方法弄到合并后的canvas中去。


也可以3个的啊


取出不同canvas生成base64,再进行合并 ,可以参考我的文章:http://cuihuan.net/?p=253


不确定你是想要达到什么效果。我的回答是针对如下我对问题的理解:两个canvas的图像按顺序绘制(合并)成新的图像。有点像大头贴,canvas1是头像,canvas2是前景,合并的过程就是先绘制头像,再绘制前景;效果就是一张大头贴。

我的解决方案是:

  1. 将canvas图像内容转成img

  2. 然后先后调用drawImage绘制img内容

效果参考我做的大头贴demo:http://jackgit.github.io/ImageEditor/app/demo.html

【热门文章】
【热门文章】