时间:2021-07-01 10:21:17 帮助过:10人阅读
本文具体要实现的效果类似下面这张图片,主题流程大概是,页面上有类似这样布局的结构,点击中间那个紫色的按钮就会生成一张这样的图片,并且能够让用户下载图片的
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部分,这里面有几个部分
$('.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); });
最后的结果生成的图片就是这样子的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。