js 最简单的方法使用canvas创建水印图片

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");
    //设置为2D
    var 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图片

效果如下:

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