给图片加水印，并平铺

今天遇到一个需求，给图片加水印，并且平铺，在网上收了半天，发现不是靠谱，东平西凑，自己搞了一个，效果已经实现，有不对的地方希望大家指正

    <img src="./123.jpg" alt="" style="display:none;">
    <script>
        $('img').each(function () {
            var _this = $(this);
            //准备img对象
            var img = new Image();
            img.src = $(this).attr('src');
            console.log(img.src)
            // 加载完成开始绘制
            img.onload=function(){
                var tpl = '<canvas width = "'+(img.height*0.4)+'"  height = "'+(img.height*0.4)+'" style="display:none;"></canvas>';
                var cw = $(tpl)[0];
                var ctxl = cw.getContext("2d");   //返回一个用于在画布上绘图的环境
                // 绘制水印                
                ctxl.font=(img.height*0.05)+"px microsoft yahei";
                ctxl.rotate(-20*Math.PI/180);
                ctxl.fillStyle = "rgba(255,255,255,0.8)";
                ctxl.fillText('666',-(img.height*0.01),(img.height*0.2));
                ctxl.rotate('20*Math.PI/180');  //坐标系还原

                //准备canvas环境
                var tmpl = '<canvas width = "'+img.width+'"  height = "'+img.height+'"></canvas>';
                var canvas=$(tmpl)[0];
                var ctx=canvas.getContext("2d");
                // 绘制图片
                ctx.drawImage(img,0,0);
                var pat = ctx.createPattern(cw, "repeat");    //平铺
                ctx.rect(0,0,150,100);
                ctx.fillStyle = pat;
                ctx.fillRect(0, 0, img.width, img.height);
                $('body').append(canvas)
                //var base64 = canvas.toDataURL('images/png');//转换成base64   如果跨域了  这个方法就不能用了  据说可以添加这个可以解决img.crossOrigin = "Anonymous";  
                //_this.attr('src',base64);
            }
        })
    </script>

结果如下

][1]

我的方法有什么问题或者有什么不对的地方欢迎指正。