需求：
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); // 导出生成的图像数据URL imageDataUrl = canvas.toDataURL("image/jpg"); // 显示或保存生成的图像 console.log(imageDataUrl); // 打印图像数据URL saveBtn.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) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = 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>
