h5 canvas做一个插入图片导出海报图片的工具

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

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

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

直接来看看代码吧：

<style>
.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;
}
</style>

<div class="box">
        <canvas id="cvs"></canvas>  
        <div class="b">生成图片</div>
  </div>
  <div class="z">
  </div>
<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标签，然后透明定位在放上传图片的位置，上传成功调用绘制的方法就行了