js图片增加水印，并上传服务器

2024 年 9 月 8 日 8点热度 0人点赞 0条评论

目录标题

- 一、前端代码
- 二、完整前后端代码

一、前端代码

watermark.js 工具类

/** * 添加水印 异步 * @param {图片file，在inout中的file} file * @param {水印数组，比如名字，电话，时间，地址} watermarks */
function addWatermarkAndUpload(file, watermarks) {
    
    return new Promise(((resolve, reject) => {
    
        const reader = new FileReader();
        reader.onload = function (event) {
    
            const img = new Image();
            img.onload = function () {
    
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');

                // 设置canvas尺寸与图片一致
                canvas.width = img.width;
                canvas.height = img.height;

                // 绘制图片到canvas
                ctx.drawImage(img, 0, 0, img.width, img.height);

                //水印大小和颜色
                let fontSize = 100
                ctx.font = fontSize + 'px Arial';
                ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
                //水印起始位置，默认左下角
                let x = 20
                let y = 20
                // 添加水印
                for (let i = 0; i < watermarks.length; i++) {
    
                    y = watermarkHandle(ctx, watermarks[i], canvas.width, canvas.height, fontSize, x, y)
                }
                // 将带有水印的canvas转换为Blob对象
                canvas.toBlob((blob) => {
    
                    if (blob) {
    
                        blob.name = file.name
                        resolve(blob);
                    } else {
    
                        reject(new Error('Failed to create blob from canvas'));
                    }
                }, 'image/png');
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(file);
    }));
}

/** * 写入水印，默认左下角 水印过长，换行 (x,y)=(0,0) 就是左下角的位置 * @param {canvas画布对象} ctx * @param {单个水印} watermark * @param {图片的长宽} height * @param {图片的长宽} width * @param {水印字体大小} fontSize * @param {水印位置，默认左下角} x * @param {水印位置，默认左下角} y */
function watermarkHandle(ctx, watermark, width, height, fontSize, x, y) {
    
    //添加水印
    let lineHeight = fontSize + 10
    let line = '';
    const list = [];
    for (let i = 0; i < watermark.length; i++) {
    
        const testLine = line + watermark[i];
        const metrics = ctx.measureText(testLine);
        const testWidth = metrics.width;
        if (testWidth < width - fontSize && i < watermark.length - 1) {
    
            line = testLine;
        } else {
    
            list.push(line)
            line = watermark[i];
        }
    }
    const testLine = line + list[list.length - 1];
    const metrics = ctx.measureText(testLine);
    const testWidth = metrics.width;
    if (testWidth < width - fontSize) {
    
        list[list.length - 1] = list[list.length - 1] + line
    } else {
    
        list.push(line)
    }
    for (let i = list.length - 1; i >= 0; i--) {
    
        ctx.fillText(list[i], x, height - y);
        y += lineHeight;
    }
    //位置
    return y;
}

使用

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片水印并上传示例</title>
</head>
<body>
<input type="file" id="imageFile" accept="image/*">
<button onclick="addWatermark()">添加水印并上传</button>

<script th:src="@{/js/watermark.js}"></script>
<script> function addWatermark() {
       const imageFileInput = document.getElementById('imageFile'); const file = imageFileInput.files[0]; if (!file) {
       alert('请先选择图片！'); return; } var watermarks = [] watermarks.push("广西壮族自2心2圩街2汇11111111111111111111111112") watermarks.push("2024-05-11 19:13:04 ") watermarks.push("李华 130733376") const promises = []; for (let i = 0; i < 3; i++) {
       promises.push(addWatermarkAndUpload(file, watermarks)) } Promise.all(promises) .then(results => {
       // 当所有Promise都完成时，results数组包含所有结果 console.log(results); // 在这里你可以一起处理所有结果 const formData = new FormData(); for (let i = 0; i < results.length; i++) {
       console.log(results[i]) formData.append('files', results[i], results[i].name); } return formData; }) .then(formData => {
       //上传,注意上传接口多个文件 return fetch('/common/uploads', {
       method: 'POST', body: formData }); }) .then(response => {
       // 处理响应 return response.json(); }) .then(data => {
       // 处理返回的数据，url console.log(data); //其他操作操作 }) .catch(error => {
       // 处理错误 console.error('Error:', error); }) } </script>
</body>
</html>