CSS3 Canvas 实现两张图片合成一张图片

需求

需求：在项目中遇到将一张固定图片和一张二维码图片合成一张新图片，并且用户能够将图片保存下载到本地。

思路：使用 CSS3 中的 Canvas 将两张图片绘制。

HTML 部分

<div><img id="img1" src="wenbo.jpg" alt="" /><img id="img2" src="demo.png" alt="" /></div><br /><div><canvas width="300" height="300" id="myCanvas"></canvas></div>

JavaScript 部分

var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");//获取元素var img1 = document.getElementById("img1");var img2 = document.getElementById("img2");// 等待图片加载完毕img1.onload = function () {ctx.drawImage(img1, 0, 0, 300, 300);};img2.onload = function () {ctx.drawImage(img2, 75, 75, 150, 150);};

实现效果

如下图所示：

html2canvans

html2canvans 插件也可以实现相关功能

插件地址：/