js 最简单的方法使用canvas创建背景水印

/*** 文字水印* @param {any} text */function watermark(text) {//创建画布var dom = document.createElement("canvas");dom.id = "CursorLayer";dom.width = 160;dom.height = 160;dom.display = "none";//实例化画布document.body.appendChild(dom);//使用画布对象var c = document.getElementById("CursorLayer");//设置为2Dvar ctx = c.getContext("2d");ctx.font = "20px 微软雅黑";var ox = c.width / 2;var oy = c.height / 2;ctx.rotate((Math.PI / 180) * -30); // 弧度 = (Math.PI/180)*角度ctx.fillText(text,-20, 100); //x,y轴相对位置ctx.translate(-ox, -oy); // 将画布的原点还原//画布填充文字信息var image = c.toDataURL("image/png");//移除画布c.remove();console.log(image)return image;}

备注：返回的是base64图片

效果如下:

具体距离和样式都可以自己微调即可。