canvas实现给照片添加水印

1.使用input选择照片

<canvas id="photo"></canvas>
<input type="file" @change="selectPhoto">

3.水印配置

wartermarkOptions: {
    text: '章某人',
    color: 'blue',
    angle: -Math.PI / 18,
    fontSize: 20,
    cols: 4,
    rows: 3
}

3.拿到file转为base64,然后创建一个新的canvas用来画水印,最后将水印canvas和照片合并成一个新的canvas

(ps:同样适用与网络图片)

selectPhoto(e) {
            let { canvas: cvs, ctx, wartermarkOptions } = this;
            let { text, color, angle, fontSize, cols, rows } = wartermarkOptions;
            let file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = function (e) {
                const base64String = e.target.result;
                let { width: c_w, height: c_h } = cvs;
                let img = new Image();
                img.src = base64String;
                img.onload = () => {
                    ctx.drawImage(img, 0, 0, c_w, c_h);
                    const watermarkText = text;
                    const tempCanvas = document.createElement('canvas');
                    const tempCtx = tempCanvas.getContext('2d');
                    tempCanvas.width = c_w;
                    tempCanvas.height = c_h;
                    tempCtx.font = `${fontSize}px sans-serif`;
                    tempCtx.fillStyle = color;
                    tempCtx.textAlign = 'center';
                    tempCtx.textBaseline = 'middle';

                    const xInterval = (c_w - (text.length * fontSize) * rows) / (rows - 1);
                    const yInterval = (c_h - fontSize * cols) / (cols - 1);

                    // 添加三行三列水印
                    for (let i = 0; i < rows; i++) {
                        for (let j = 0; j < cols; j++) {
                            let x = i * xInterval + (i * (text.length * fontSize)) + (text.length * fontSize) / 2;
                            let y = j * yInterval + (j * fontSize) + fontSize / 2;
                            tempCtx.fillText(watermarkText, x, y);
                        }
                    }

                    ctx.save();
                    ctx.translate(c_w / 2, c_h / 2);
                    ctx.rotate(angle);
                    ctx.drawImage(tempCanvas, -c_w / 2, -c_h / 2);
                    ctx.restore();

                    //添加完水印的照片
                    // let warterPhotoBase64 = cvs.toDataURL('image/png');
                    // console.log('添加完水印的照片', warterPhotoBase64)
                };
            };
            reader.readAsDataURL(file);
        }

4.完整代码 

<template>
    <div>
        <canvas id="photo"></canvas>
        <input type="file" @change="selectPhoto">
    </div>
</template>

<script>
export default {
    name: 'watermarkPhoto',
    data() {
        return {
            canvas: null,
            ctx: null,
            wartermarkOptions: {
                text: '章某人',
                color: 'blue',
                angle: -Math.PI / 18,
                fontSize: 20,
                cols: 4,
                rows: 3
            }
        };
    },
    mounted() {
        this.canvas = document.getElementById('photo');
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = 300;
        this.canvas.height = 400;
    },
    methods: {
        selectPhoto(e) {
            let { canvas: cvs, ctx, wartermarkOptions } = this;
            let { text, color, angle, fontSize, cols, rows } = wartermarkOptions;
            let file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = function (e) {
                const base64String = e.target.result;
                let { width: c_w, height: c_h } = cvs;
                let img = new Image();
                img.src = base64String;
                img.onload = () => {
                    ctx.drawImage(img, 0, 0, c_w, c_h);
                    const watermarkText = text;
                    const tempCanvas = document.createElement('canvas');
                    const tempCtx = tempCanvas.getContext('2d');
                    tempCanvas.width = c_w;
                    tempCanvas.height = c_h;
                    tempCtx.font = `${fontSize}px sans-serif`;
                    tempCtx.fillStyle = color;
                    tempCtx.textAlign = 'center';
                    tempCtx.textBaseline = 'middle';

                    const xInterval = (c_w - (text.length * fontSize) * rows) / (rows - 1);
                    const yInterval = (c_h - fontSize * cols) / (cols - 1);

                    // 添加三行三列水印
                    for (let i = 0; i < rows; i++) {
                        for (let j = 0; j < cols; j++) {
                            let x = i * xInterval + (i * (text.length * fontSize)) + (text.length * fontSize) / 2;
                            let y = j * yInterval + (j * fontSize) + fontSize / 2;
                            tempCtx.fillText(watermarkText, x, y);
                        }
                    }

                    ctx.save();
                    ctx.translate(c_w / 2, c_h / 2);
                    ctx.rotate(angle);
                    ctx.drawImage(tempCanvas, -c_w / 2, -c_h / 2);
                    ctx.restore();

                    //添加完水印的照片
                    // let warterPhotoBase64 = cvs.toDataURL('image/png');
                    // console.log('添加完水印的照片', warterPhotoBase64)
                };
            };
            reader.readAsDataURL(file);
        }
    }
};
</script>