HTML5 画布绘制海报

需求：

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>