用canvas做一个制作导入图片生成海报图片的小工具

利用canvas做一个插入图片，导出海报图片的工具

有张背景的海报图，当用户上传图片，图片在背景图的空白部分展示，并且点击可以生成显示的效果图片，利用canvas是很容易实现的

canvas的toDataURL()方法可以把canvas转化为base64的图片

直接来看看代码吧：

1
2
3
4
5
6
<div class="box">
       <canvas id="cvs"></canvas>  
       <div class="b">生成图片</div>
 </div>
 <div class="z">
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.box {
           position: absolute;
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
       }

       .b {
           position: absolute;
           bottom: 20px;
           left: 150px;
           background-color: #00ffff;
           color: #ffffff;
           width: 100px;
           height: 50px;
           line-height: 50px;
           text-align: center;
       }

       .zz {
           position: absolute;
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
           z-index: 100;
           background-color: rgba(0, 0, 0, .8);
           padding: 20px;
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
    /*
        获取canvas节点，并且设置canvas的宽高为屏幕宽高
    */
    var canvas = document.getElementById("cvs");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    window.onresize = function (e) {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    /*
        设置在画布上的绘制环境
    */
    var ctx = canvas.getContext("2d");
    bgWrite();
    writeImg("sc.png");

    /*
        海报背景图片的绘制
    */
    function bgWrite(callback) {
        var imgObj = new Image();
        imgObj.src = "bg5.jpg";
        imgObj.onload = function () {
            ctx.drawImage(imgObj, 0, 0, window.innerWidth, window.innerHeight);
            typeof callback == "function" && callback();
        }
    }

    /*
        传入要插入的图片地址，完成绘制
    */
    function writeImg(src) {
        bgWrite(function () {
            var myImg = new Image();
            myImg.src = src;
            myImg.onload = function () {
                /*
                    绘制后面插入的图片，宽高位置根据背景图位置决定
                    注意：安卓下是等比例，但是在ios下需要2倍
                */
                if(navigator.userAgent.indexOf("iPhone")> -1) {
                    ctx.drawImage(myImg, 200, 400, 400, 400);
                }
                    ctx.drawImage(myImg, 100, 200, 200, 200);
                /*
                    img绘制完成，给点击事件，即点击导出图片到另一个div
                */
                $(".b").on("click", function () {
                    console.log("sdfjktj")
                    var image = sheng(canvas);
                    $(".z").addClass("zz").append($("<img>").attr("src", image));
                })
            }

        })
    }

    /*
        传入要绘制图片的canvas节点，返回base64
    */
    function sheng(node) {
        var image = node.toDataURL("image/png");
        return image;
    }

</script>

简单的效果实现了，如果要实现点击上传图片，只要自己写一个上传图片的input标签，然后透明定位在放上传图片的位置，上传成功调用绘制的方法就行了