canvas实现多图片合成

<div id="div" style="width:80%;height:600px;margin:0 auto;background-color: #eee;"></div>

<script>

        function toBase64(url) {

            var oImg = document.createElement('img');

            oImg.src = url; // 加载获取底层图片数据

            oImg.onload = function() {// 图片加载完成后回调处理图片

                var canvas = document.createElement('canvas');

                canvas.width = this.width;

                canvas.height = this.height;

                var ctx = canvas.getContext('2d');

                ctx.drawImage(this, 0, 0, this.width, this.height);

                var childImg = new Image();

                childImg.src = './3.png'; // 加载获取上层图片数据

                childImg.onload = function() {

                    ctx.drawImage(this, 100, 100, 173, 72); // this 上层图片数据 100 100 上层图片绘制的坐标位置 173 72 上层图片尺寸

                    var nImg = document.createElement('img');

                    nImg.src = canvas.toDataURL('image/png');

                    document.getElementById('div').appendChild(nImg);

                }

            };

        }

        toBase64('./2.jpg')

    </script>

以上