canvas 合成图片+文字

/*
 * ###########################################################################################
 * #canvas 合成图片+文字
 * ###########################################################################################
 */

// 【插件调用示例】
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// var CSR = new CanvasRender({
//     imgContainer: '#im',
//     canvasId: 'zscanvas',
//     canvasWidth: 500,
//     canvasHeight: 333,
//     imgSrc: ['/images/basic.jpg', '/images/water.png'],
//     imgXs: [0, 50],
//     imgYs: [0, 100],
//     imgWs: [500, 30],
//     imgHs: [333, 30],
//     txts: ['我是一个文本', '我是更多文本'],
//     txtXs: [20, 0],
//     txtYs: [50, 200],
//     fonts: ['20px 微软雅黑', '30px 微软雅黑'],
//     colors: ['#000', '#ff0000']
// });
//
// CSR.render(function (base64Url) {
//    console.log(base64Url);
// });
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

;(function (undefined) {
    "use strict";
    var _global;

    // 插件构造函数
    function CanvasRender(opt) {
        this._initial(opt);
    }

    CanvasRender.prototype = {
        _initial: function (opt) {
            this.opts = $.extend({}, opt, true);
        },

        render: function(callback){
            this.renderToImage(
                this.opts.imgContainer,
                this.opts.canvasId,
                this.opts.canvasWidth,
                this.opts.canvasHeight,
                this.opts.imgSrc,
                this.opts.imgXs,
                this.opts.imgYs,
                this.opts.imgWs,
                this.opts.imgHs,
                this.opts.textStatus,
                this.opts.txts,
                this.opts.txtXs,
                this.opts.txtYs,
                this.opts.fonts,
                this.opts.colors,
                function (image) {
                    return callback && callback(image);
                }
            );
        },

        /*
         * ###########################################################################################
         * # 主要的调用方法
         * # 如果不用合成字体textStatus传值false
         * ###########################################################################################
         */
        renderToImage: function (imgContainer, canvasId, canvasWidth, canvasHeight, imgSrc, imgX, imgY, imgW, imgH, textStatus, txt, txtX, txtY, font, color, callback) {
            var canvasHtml = '<canvas width="' + canvasWidth + '" height="' + canvasHeight + '" id="' + canvasId + '" hidden="hidden"></canvas>';
            $('body').append(canvasHtml);

            var __ = this;
            var imgI = 0, imgL = imgSrc.length, txtI = 0, txtL = txt.length;
            var myCanvas = document.getElementById(canvasId);

            var canvasObject = __.getCanvasContext(canvasId);
            canvasObject.clearRect(0, 0, canvasWidth, canvasHeight);// 在给定的矩形里清空画布的内容

            this.createImgToCanvas(canvasObject, imgSrc, imgX, imgY, imgW, imgH, imgI, imgL, function () {
                if (textStatus === false) {
                    var image = myCanvas.toDataURL("image/png");
                    $(imgContainer).attr('src', image);
                    return callback && callback(image);
                } else {
                    __.createTextToCanvas(canvasObject, txt, txtX, txtY, font, color, txtI, txtL, function () {
                        var image = myCanvas.toDataURL("image/png");
                        $(imgContainer).attr('src', image);
                        setTimeout(function () {
                            $('#' + canvasId).remove();
                            return callback && callback(image);
                        }, 500);
                    });
                }
            });
        },

        /*
        * ###########################################################################################
        * # 创建文本绘画
        * ###########################################################################################
        */
        createTextToCanvas: function (canvasObject, txt, x, y, font, color, startI, length, callBack) {
            canvasObject.font = font[startI];
            canvasObject.fillStyle = color[startI];
            canvasObject.fillText(txt[startI], x[startI], y[startI]);
            startI += 1;

            if (startI !== length) {
                this.createTextToCanvas(canvasObject, txt, x, y, font, color, startI, length, callBack);
            } else {
                return callBack && callBack();
            }
        },

        /*
        * ###########################################################################################
        * # 创建调用getCanvasContext 绘画的上下文
        * ###########################################################################################
        */
        getCanvasContext: function (id) {
            return document.getElementById(id).getContext("2d");
        },

        /*
        * ###########################################################################################
        * # starImg规定要使用的图像、画布或视频。
        * # tarImg规定要使用的图像、画布或视频。
        * # x[startI]在画布上放置图像的 x 坐标位置
        * # y[startI]在画布上放置图像的 y 坐标位置。
        * # width[startI]可选。要使用的图像的宽度（伸展或缩小图像）。xzvcxdsaQ    WWWQEZ
        * # height[startI]可选。要使用的图像的高度（伸展或缩小图像）。
        * ###########################################################################################
        */
        createImgToCanvas: function (canvasObject, src, x, y, width, height, startI, length, callBack) {
            var starImg = new Image();
            starImg.src = src[startI];
            var __ = this;
            starImg.onload = function () {
                canvasObject.drawImage(starImg, x[startI], y[startI], width[startI], height[startI]);
                startI += 1;// 调用完之后+1，调用下一张图片
                if (startI !== length) {
                    __.createImgToCanvas(canvasObject, src, x, y, width, height, startI, length, callBack);
                } else {
                    return callBack && callBack();
                }
            };
        },
    };

    _global = (function () {return this || (0, eval)('this');}());

    if (typeof module !== "undefined" && module.exports) {
        module.exports = CanvasRender;
    } else if (typeof define === "function" && define.amd) {
        define(function () {
            return CanvasRender;
        });
    } else {
        !('CanvasRender' in _global) && (_global.CanvasRender = CanvasRender);
    }
}());

1. 6