js canvas实现5张图片合成一张图片

本文具体要实现的效果类似下面这张图片，主题流程大概是，页面上有类似这样布局的结构，点击中间那个紫色的按钮就会生成一张这样的图片，并且能够让用户下载图片的

1、首先我们布局页面的时候用的都是图片来布局成这个样子[CSS自己脑补]，class为pho-bg这一段是页面开始显示的结构，几张图片定位，按钮在中间的样子。class为photo的就是用来到时候放置生成的图片。canvas就是画布。至于下面的两张图片其实就是按钮的图片和背景图，到时候一并加入画布里面【不过在页面的时候不显示】

 <div class=\"pho-bg\">
 <img src=\"ossweb-img/man-1.png\" class=\"man man-1\" id=\"man-1\" alt=\"\">
 <img src=\"ossweb-img/man-2.png\" class=\"man man-2\" id=\"man-2\" alt=\"\">
 <img src=\"ossweb-img/man-3.png\" class=\"man man-3\" id=\"man-3\" alt=\"\">
 <img src=\"ossweb-img/man-4.png\" class=\"man man-4\" id=\"man-4\" alt=\"\">
 <a href=\"javascript:;\" class=\"btn\" title=\"\"></a>
 <img src=\"ossweb-img/sen.png\" class=\"sen1\" id=\"sen1\" alt=\"\">
 <img id=\"show-pic\" alt=\"\">
 </div>
 <div class=\"photo\"></div>
 <canvas id=\"myCanvas\" width=\"750\" height=\"1180\"></canvas>
 <img src=\"ossweb-img/bg1.jpg\" id=\"bg1\" alt=\"\">
 <img src=\"ossweb-img/btn.png\" id=\"btn1\" alt=\"\">

2、重要的是js部分，这里面有几个部分

在点击按钮时隐藏掉本来的页面，显示画布生成的图片
canvas.width，canvas.height是设置你生成的图片的大小。举个例子：如果我在canvas的html标签里面设置的width=750，height=1180，但是在js里面设置了canvas.width=500，canvas.height=500，那么生成的图片的大小就会是500*500.
使用createPattern来制作图片的背景图
使用drawImage()来制作组成图片的小元素也就是红、黄、蓝、绿、紫那几张图片
最后用toDataURL()将画布的内容转为图片并且渲染到页面上

$(\'.btn\').click(function() {
 $(\'.pho-bg\').hide();
 // $(\'#myCanvas\').show();
 var man1 = document.getElementById(\"man-1\"),
 man2 = document.getElementById(\"man-2\"),
 man3 = document.getElementById(\"man-3\"),
 man4 = document.getElementById(\"man-4\"),
 sen1 = document.getElementById(\"sen1\"),
 btn1 = document.getElementById(\"btn1\"),
 canvasBg = document.getElementById(\"bg1\");
 
 
 var canvas = document.getElementById(\"myCanvas\");
 ctx = canvas.getContext(\"2d\");
 canvas.width = 750;
 canvas.height = 1180;
 // 制作背景图
 var patBg = ctx.createPattern(canvasBg, \"repeat\");
 ctx.rect(0, 0, 750, 1180);
 ctx.fillStyle = patBg;
 ctx.fill();
 // 将man1,man2,man3,man4,sen1,btn加入画布
 ctx.drawImage(man1, 0, 0, 341, 474);
 ctx.drawImage(man2, 410, 0, 341, 474);
 ctx.drawImage(man3, 0, 474, 341, 474);
 ctx.drawImage(man4, 410, 474, 341, 474);
 
 ctx.drawImage(sen1, 40, 950, 669, 109);
 ctx.drawImage(btn1, 150, 350, 449, 288);
 var newImg = new Image();
 newImg.src = canvas.toDataURL(\"image/png\");
 
 $(\'.photo\').append(newImg);
 
 });

最后的结果生成的图片就是这样子的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。