需求：
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>