需求：
1、根据用户填写的联系人信息：姓名、手机号及微信二维码，生成海报，并下载保存到本地；
2、可多个海报切换供用户选择
实现：使用html5实现，为方便用户，做的手机网站的样式，
总结：
1、canvas 绘制图片
<canvas id="myCanvas" width="498" height="800" style="width:100%;display:block"></canvas>
var canvas = document.getElementById("myCanvas"); // 获取Canvas元素
var context = canvas.getContext("2d"); // 创建画布上下文对象
2、清除画布上的内容
context.clearRect(0, 0, canvas.width, canvas.height)；
3、放一个图片做为背景图
var img = new Image();
img.src = haibao.src;
img.onload = function () {//图片加载以后再放到画布上，防止图片加载未完成的情况context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
4、把文字叠加在背景图上面
context.textBaseline = "top";//不加这个文字可能会被图片盖住
5、设置文字样式、颜色等
context.font = "24px Arial";
context.fillStyle = "#333";
context.fillText("联系人：李老师" , left, top, width,height);
6、导出生成的图像数据URL
imageDataUrl = canvas.toDataURL();
以下是完整代码：
样式：
*{margin:0;padding:0;}body{padding:30px 15px 30px;background:#f5f5f5;}h1{font-size:18px;color:#333;text-align:center;margin:0px 0 20px;}.content{font-size:18px;padding: 20px;background: #FFF;box-shadow: 0 0 10px #666;border-radius: 10px;}.box input{ width: 100%;height: 40px;line-height: 40px;font-size:16px;margin-bottom: 10px;border: 1px solid #ddd;display: block;border-radius: 5px;padding-left: 10px;box-sizing: border-box;}.box button{border-radius: 4px 4px 4px 4px; height: 26px; line-height:26px; width:80px; display: inline-block; vertical-align: middle; border:0; background-color:#196aff;color:#FFF;margin-bottom:20px;}.box .li span{font-size:16px;color:#666;margin-bottom:10px; display:block}.box .ts{font-size:16px;color:#f00;font-weight:bold;display:block; clear:both;width:100%;margin-bottom:10px;}.imgContent {overflow-x:scroll}.imgContent .imgBox{width:100%; white-space:nowrap;}.imgContent img{height:150px;width:auto;display:inline-block;margin-right:3px;border:4px solid #FFF;border-radius: 10px;}.imgContent img.cur{border-color:#196aff}
HTML:
<div class="content"><h1>生成海报</h1><div class="box"><div class="li"><span>请选择要生成的海报：</span><div class="imgContent"><div class="imgBox"><img class="haibaoImg" _index="1" src="img1.jpg" /><img class="haibaoImg" _index="2" src="img2.jpg"/></div></div></div><input type="text" id="userName" placeholder="请填写联系人姓名"><input type="text" id="MPhone" placeholder="请填写手机号"><div class="li"><span>请上传微信二维码：</span><input type="file" id="uploadFile" title="微信二维码"/></div><button onclick="generateImage()">点击生成</button><!--原海报--><div class="ts" id="saveBtn" style="display:none;">生成成功，长按下方图片，保存到手机</div><img id="haibao" style="width:100%;display:block" onclick="downImage()" /><!--生成的海报,微信上没办法下载，换成img显示了，img支持长按保存图片--><div style="display:none"><canvas id="myCanvas" width="498" height="800" style="width:100%;display:block"></canvas></div></div><em>---------- 到底了 ----------</em></div>js 代码 ：
<script type="text/javascript">var imageDataUrl = "";var userName = "";var codeImgPath = "";var canvas = document.getElementById("myCanvas"); // 获取Canvas元素var context = canvas.getContext("2d"); // 创建画布上下文对象//绘制图片function generateImage() {if (!codeImgPath) {alert("请上传微信二维码");return;}var haibao = document.getElementById("haibao");var saveBtn = document.getElementById("saveBtn");userName = document.getElementById("userName").value; // 获取用户输入的文本var mphone = document.getElementById("MPhone").value; // 获取用户输入的文本//海报context.clearRect(0, 0, canvas.width, canvas.height)var img = new Image();img.src = haibao.src;img.onload = function () {img.crossOrigin = '*';// 在 canvas 上绘制图片context.drawImage(img, 0, 0, canvas.width, canvas.height);//将文本绘制到画布上;context.textBaseline = "top";// 设置字体样式、大小等属性context.fillStyle = "#333";//第一个文字颜色context.font = "24px Arial";//第一个文字样式context.fillText("联系人：" + userName, canvas.width * 0.75, 60, canvas.width * 0.2, 40);//第一个文字放在右上角：（显示的文字，left，top，宽，高）context.fillStyle = "#000";//第二个文字颜色context.font = "bold 28px Arial";//第二个文字样式context.fillText(mphone, canvas.width * 0.75, 90, canvas.width * 0.2, 40);//放上第二个文字//把二维码绘制在画布上var codeImg = new Image();codeImg.src = codeImgPath;codeImg.onload = function () {var width = canvas.width * 0.14;var height = width / codeImg.width * codeImg.height;context.drawImage(codeImg, canvas.width * 0.75, 140, width, height);// 导出生成的图像数据URLimageDataUrl = canvas.toDataURL("image/jpg");// 显示或保存生成的图像console.log(imageDataUrl); // 打印图像数据URLsaveBtn.setAttribute("href", imageDataUrl);saveBtn.style.display = 'inline-block';haibao.src = imageDataUrl;}}}//下载图片（微信上不支持下载）function downImage() {if (!imageDataUrl) return;var a = document.createElement("a");a.href = imageDataUrl;a.download = userName ? userName:"生成海报";//设置保存的图片的文件名a.click();}//上传二维码const input = document.getElementById('uploadFile');input.addEventListener('change', function () {const file = this.files[0]; // 选择第一个文件if (file) {var url = null;// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}if (url) {codeImgPath = url;}}});//切换海报window.onload = function () {$(".haibaoImg").each(function () { // 遍历每个.item元素$(this).click(function () { // 给当前元素添加点击事件$(this).addClass("cur"); // 添加"cur"类名$(this).siblings().removeClass("cur"); // 移除同级元素的"c"类名console.log("当前图片src", $(this).attr("src"));$("#haibao").attr("src", $(this).attr("src")) ;$("#haibao").attr("_index", $(this).attr("_index"));canvas.width = $(this).prop('naturalWidth');canvas.height = $(this).prop('naturalHeight');//清除画布context.clearRect(0, 0, canvas.width, canvas.height);saveBtn.style.display = 'none';});});$(".haibaoImg").eq(0).click();}</script>
