canvas合成图片

canvas合成图片 (没有jquery实现不了)

利用jquery实现

	<div class="pho-bg">
    		 <img src="logo.png" class="man man-1" id="man-1" alt="" style="display: none">
   	 </div>
   			<canvas id="myCanvas" width="750" height="1180"></canvas>
   			 <img src="banner.png" id="bg1" alt="" style="display: none">
   	  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
   	 <script>
   			 var man1 = document.getElementById("man-1"),
   			        canvasBg = document.getElementById("bg1");
   			        var canvas = document.getElementById("myCanvas");
   			        ctx = canvas.getContext("2d");
   			        canvas.width = 750;
   			        canvas.height = 1180;
   			        // 制作背景图
   			        var patBg = ctx.createPattern(canvasBg, "repeat");
   			        console.log(patBg, man1)
   			        ctx.rect(0, 0, canvas.width, canvas.width);
   			        ctx.fillStyle = patBg;
   			        ctx.fill();
   			        ctx.drawImage(man1, 303, 300, 100, 100);
   			    </script>

使用qrcode实现生成二维码
如果报生成图片错误请在运行

在这里插入代码片
```<input id="code-url" type="hidden" value="http://www.baidu.com" /><br />
    <div id="mid-qrcode"></div>
    <div id="divOne"></div>

    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var qrcode = $('#divOne').qrcode({
                text: $("#code-url").val(),
                width: 150,
                height: 150,
            }).hide();
            var canvas = qrcode.find('canvas').get(0);
            var data_codeImg = canvas.toDataURL('image/jpg');//图片base64位字符串
            data = [
                'banner.png', //背景海报图
                data_codeImg
            ], base64 = [];
            function draw(fn) {
                var c = document.createElement('canvas'),  // 获取canvas对象( 通过选择器选择canvas元素 )
                    ctx = c.getContext('2d'),  // 通过canvas获取他的上下文绘制环境( context )
                    len = data.length;
                c.width = 1125;  // 画布宽   canvas的默认宽度与高度:宽度:300,高度:150 注：canvas的宽度与高度，只能通过行间属性或者js动态修改，不要通过样式去修改，否则获取到的宽度与高度不准
                c.height = 536;  // 画布高
                ctx.rect(0, 0, c.width, c.height);  // 创建矩形 参数：绘制起点x坐标，绘制起点y坐标，矩形宽（像素），矩形高（像素）
                ctx.fillStyle = '#fff';
                ctx.fill();
                function drawing(n) {
                    if (n < len) {
                        var img = new Image;
                        img.src = data[n];
                        img.onload = function () {
                            if (n === 1) {
                                // 画图 参数：图片对象，相对画布的起点x坐标，
                                // 相对画布的起点y坐标，绘制的图片宽度（二维码，px），绘制的图片高度（二维码，px）
                                ctx.drawImage(img, 60, 160, 250, 250);
                            }
                            else if (n === 0) {
                                ctx.drawImage(img, 0, 0, c.width, c.height);
                            }
                            drawing(n + 1);//递归
                        }
                    } else {
                        //保存生成作品图片
                        base64.push(c.toDataURL("image/jpeg", 0.8));
                        fn();
                    }
                }
                drawing(0);
            }
            // 调用
            function hecheng() {
                draw(function () {
                    document.getElementById("mid-qrcode").innerHTML = '<img src="' + base64[0] + '">';
                });
            }
            hecheng()
        });
    </script>