프런트엔드에 워터마크 추가

 addWatermark:function(el,color, text, bgPos, bgSize, font){
            var wdh = 400;
            var hgh = 280;
            if (font) {
                wdh = font[0];
                hgh = font[1];
            }
            var baseTxt = (text == '') ? this.userEid : text;
            var textcolor = (color == '') ? '#ffffff' : color;
            function convertImageToCanvas() {
                var canvas = document.createElement("canvas");
                canvas.width = wdh;
                canvas.height = hgh;
                var endX = 45;
                var endY = 38;
                var ctx = canvas.getContext("2d");
                ctx.beginPath();

                ctx.fillStyle = textcolor;
                ctx.font = "18pt  ";
                ctx.textAlign = "center";
                ctx.translate(endX, endY);
                ctx.rotate(Math.PI / 6);
                ctx.fillText(baseTxt, 0, 0);
                ctx.restore();
                return canvas.toDataURL("image/png")
            }
            $(el).css({
                backgroundImage: "url(" + convertImageToCanvas() + ")",
                backgroundPosition: bgPos,
                backgroundSize: bgSize
            })
        }