预览图

简介：利用canvas画布转图片的功能，把生成的图片作为HTML元素的背景图

1、文字水印生成

// 文字水印生成
function watermarkText(html, str, options = {}) {
    let {
        fontSize = 18, // 设置字体大小
        fontFamily = 'Vedana',  // 设置字体
        width = str.length * fontSize,  // 设置画布的宽
        height = 120, // 设置画布的高
        color = 'rgba(0, 0, 0, 0.2)', // 设置填充绘画的颜色/渐变模式
        angle = -25, // 旋转角度
        textAlign = 'left', // 设置文本内容的对齐方式
        font, // 设置字体及大小
        textBaseline = 'Middle', // 设置文本基线
        start = 0, // 开始绘制文本的X坐标位置
        end = height/1.2 // 开始绘制文本的Y坐标位置
    } = options
    
    // 创建画布
    let cans = createCanvas(width, height)
    let canvas = cans.canvas;
    let ctx = cans.ctx;
    ctx.rotate(angle * Math.PI / 180);
    ctx.font = font || fontSize + 'px ' + fontFamily;
    ctx.fillStyle = color;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
    ctx.fillText(str, start, end);
    // 填充水印
    fillMark(canvas, html)
}

2、图片水印生成

// 图片水印生成
function watermarkImg(html, options = {}) {
    let {
        width = 200,  // 设置画布的宽
        height = 120, // 设置画布的高
        angle = -25, // 旋转角度
        x = 0, // 放置图像的x坐标
        y = height/1.5, // 放置图像的y坐标
        src = '' // 图片地址
    } = options
    
    // 创建画布
    let cans = createCanvas(width, height)
    let canvas = cans.canvas;
    let ctx = cans.ctx;
    ctx.rotate(angle * Math.PI / 180);
    let img = new Image() // 创建图片
        img.setAttribute('crossOrigin', 'anonymous')
    img.onload = function(e) { // 监听图片加载完成
        ctx.drawImage(img, x, y, this.width, this.height)
        // 填充水印
        fillMark(canvas, html)
    }
    img.src = src
}

3、创建画布及水印填充方法

// 创建画布
function createCanvas(width, height){
    // 创建一个画布
    let canvas = document.createElement('canvas');
    // 设置画布的宽高
    canvas.width = width;
    canvas.height = height;
    
    return {
        canvas,
        ctx: canvas.getContext('2d')
    }
}

// 填充水印
function fillMark(canvas, html){
    html.style.pointerEvents = 'none';
    html.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat';
}

4、本demo使用的例子

let html = document.getElementById('c1')
watermarkText(html, '《蜀道难》李白', { width: 200, start: -30 })

let html2 = document.getElementById('c2')
watermarkImg(html2, { src: './img/sdn.png', x: -20 })