首页 > 网络编程 > JavaScript > javascript技巧 > Javascript绘图板

基于Javascript实现网页版的绘图板

2024-10-31 10:25:48 作者：天天进步2015

这篇文章主要为大家详细介绍了如何基于HTML5 Canvas和jQuery实现的简单网页版绘图编辑器,文中的示例代码讲解详细,需要的小伙伴可以了解下

项目简介

这是一个基于HTML5 Canvas和jQuery实现的简单网页版绘图编辑器。提供了基础的图片编辑功能，包括画笔工具、橡皮擦、亮度/对比度调节等功能。可以用于简单的图片编辑和绘图需求。

主要功能

1. 基础绘图工具

画笔工具：支持自定义颜色和大小

橡皮擦工具：支持自定义大小

撤销/重做：支持多步操作历史记录

2. 图片处理

图片上传：支持上传本地图片

图片调整：支持亮度和对比度调节

图片保存：可将编辑后的图片保存到本地

技术实现要点

1. 画布初始化

const canvas = $('#imageCanvas')[0];
const ctx = canvas.getContext('2d');

使用HTML5 Canvas作为绘图基础，默认设置白色背景。

2. 绘图实现

绘图功能通过监听鼠标事件实现：

mousedown：开始绘制
mousemove：持续绘制
mouseup/mouseleave：结束绘制

关键代码：

function startDrawing(e) {
    isDrawing = true;
    ctx.beginPath();
    
    if (currentTool === 'eraser') {
        ctx.save();
        ctx.globalCompositeOperation = 'destination-out';
    } else {
        ctx.globalCompositeOperation = 'source-over';
    }
    
    ctx.moveTo(e.offsetX, e.offsetY);
}

3. 橡皮擦实现

橡皮擦通过设置 Canvas 的 globalCompositeOperation 属性为 ‘destination-out’ 来实现透明擦除效果：

if (currentTool === 'eraser') {
    ctx.save();
    ctx.globalCompositeOperation = 'destination-out';
}

4. 图片处理

图片上传后会自动调整大小以适应画布，保持原始比例：

const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
const x = (canvas.width - img.width * scale) / 2;
const y = (canvas.height - img.height * scale) / 2;

5. 亮度和对比度调节

使用 Canvas 的 filter 属性实现：

ctx.filter = `brightness(${brightness}%) contrast(${contrast}%)`;

6. 撤销/重做功能

通过保存画布状态实现：

function saveState() {
    undoStack.push(canvas.toDataURL());
    redoStack = [];
    updateUndoRedoButtons();
}

使用说明

1.上传图片：点击"上传图片"按钮选择本地图片

2.基础编辑：

使用画笔工具进行绘制
使用橡皮擦工具擦除内容
调节亮度和对比度滑块修改图片效果

3.撤销/重做：使用对应按钮进行操作历史管理

4.保存图片：点击"保存"按钮将结果保存为PNG格式

技术依赖

HTML5 Canvas

jQuery 3.7.1

现代浏览器（支持ES6+）

改进方向

1. 功能扩展

添加图片旋转/翻转功能
实现图片裁剪功能
添加更多滤镜效果
实现图层功能

2. 用户体验优化

添加快捷键支持
优化工具切换交互
添加操作提示
完善错误处理

3. 性能优化

优化大图片处理
改进撤销/重做机制
添加操作状态缓存
优化Canvas渲染性能

注意事项

图片上传大小没有限制，但建议不要超过5MB

保存的图片格式为PNG，支持透明度

浏览器需要支持Canvas的相关API

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版图片编辑器</title>
    <!-- 引入 jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f0f0;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .toolbar {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .toolbar button {
            padding: 8px 15px;
            margin: 0 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .toolbar button:hover {
            background: #f5f5f5;
        }
        
        .toolbar button.active {
            background: #e0e0e0;
        }
        
        .canvas-container {
            position: relative;
            margin: 20px 0;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        #imageCanvas {
            border: 1px solid #ddd;
            margin: 0 auto;
            display: block;
        }
        
        .controls {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-top: 20px;
        }
        
        .control-group {
            margin: 10px 0;
        }
        
        .control-group label {
            display: block;
            margin-bottom: 5px;
        }
        
        input[type="range"] {
            width: 200px;
        }
        
        input[type="color"] {
            width: 50px;
            height: 30px;
            padding: 0;
            border: none;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="toolbar">
            <input type="file" id="imageInput" class="hidden" accept="image/*">
            <button id="uploadBtn">上传图片</button>
            <button id="undoBtn" disabled>撤销</button>
            <button id="redoBtn" disabled>重做</button>
            <button id="saveBtn" disabled>保存</button>
            <button id="brushBtn">画笔</button>
            <button id="eraserBtn">橡皮擦</button>
        </div>

        <div class="canvas-container">
            <canvas id="imageCanvas" width="800" height="600"></canvas>
        </div>

        <div class="controls">
            <div class="control-group">
                <label for="brightnessRange">亮度：</label>
                <input type="range" id="brightnessRange" min="0" max="200" value="100">
                <span id="brightnessValue">100%</span>
            </div>

            <div class="control-group">
                <label for="contrastRange">对比度：</label>
                <input type="range" id="contrastRange" min="0" max="200" value="100">
                <span id="contrastValue">100%</span>
            </div>

            <div class="control-group">
                <label for="brushSize">画笔大小：</label>
                <input type="range" id="brushSize" min="1" max="50" value="5">
                <span id="brushSizeValue">5px</span>
            </div>

            <div class="control-group">
                <label for="brushColor">画笔颜色：</label>
                <input type="color" id="brushColor" value="#000000">
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const canvas = $('#imageCanvas')[0];
            const ctx = canvas.getContext('2d');
            let isDrawing = false;
            let currentTool = 'brush';
            let originalImage = null;
            let undoStack = [];
            let redoStack = [];
            
            // 初始化画布，设置白色背景
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            saveState();

            // 工具选择
            $('#brushBtn').click(function() {
                currentTool = 'brush';
                $(this).addClass('active');
                $('#eraserBtn').removeClass('active');
            });

            $('#eraserBtn').click(function() {
                currentTool = 'eraser';
                $(this).addClass('active');
                $('#brushBtn').removeClass('active');
            });

            // 绘图功能
            function startDrawing(e) {
                isDrawing = true;
                ctx.beginPath();
                
                if (currentTool === 'eraser') {
                    ctx.save();
                    ctx.globalCompositeOperation = 'destination-out';
                } else {
                    ctx.globalCompositeOperation = 'source-over';
                }
                
                ctx.moveTo(e.offsetX, e.offsetY);
            }

            function draw(e) {
                if (!isDrawing) return;
                
                if (currentTool === 'eraser') {
                    ctx.save();
                    ctx.globalCompositeOperation = 'destination-out';
                } else {
                    ctx.globalCompositeOperation = 'source-over';
                }
                
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
                
                if (currentTool === 'eraser') {
                    ctx.restore();
                }
            }

            function stopDrawing() {
                if (isDrawing) {
                    isDrawing = false;
                    ctx.closePath();
                    
                    if (currentTool === 'eraser') {
                        ctx.restore();
                    }
                    
                    saveState();
                }
            }

            $('#imageCanvas').mousedown(startDrawing)
                           .mousemove(draw)
                           .mouseup(stopDrawing)
                           .mouseleave(stopDrawing);

            // 画笔控制
            $('#brushColor').change(function() {
                ctx.strokeStyle = $(this).val();
            });

            $('#brushSize').on('input', function() {
                const size = $(this).val();
                ctx.lineWidth = size;
                $('#brushSizeValue').text(size + 'px');
            });

            // 图片上传处理
            $('#uploadBtn').click(function() {
                $('#imageInput').click();
            });

            $('#imageInput').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const img = new Image();
                        img.onload = function() {
                            // 保持图片比例
                            const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
                            const x = (canvas.width - img.width * scale) / 2;
                            const y = (canvas.height - img.height * scale) / 2;
                            
                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                            ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
                            
                            originalImage = img;
                            saveState();
                            $('#saveBtn').prop('disabled', false);
                        };
                        img.src = event.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });

            // 图片调整
            function applyAdjustments() {
                if (!originalImage) return;

                const brightness = $('#brightnessRange').val();
                const contrast = $('#contrastRange').val();

                // 计算保持宽高比的缩放
                const scale = Math.min(canvas.width / originalImage.width, canvas.height / originalImage.height);
                const x = (canvas.width - originalImage.width * scale) / 2;
                const y = (canvas.height - originalImage.height * scale) / 2;

                ctx.filter = `brightness(${brightness}%) contrast(${contrast}%)`;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(originalImage, x, y, originalImage.width * scale, originalImage.height * scale);
                ctx.filter = 'none';

                saveState();
            }

            $('#brightnessRange, #contrastRange').on('input', function() {
                const value = $(this).val();
                const id = $(this).attr('id');
                $(`#${id}Value`).text(value + '%');
                applyAdjustments();
            });

            // 撤销/重做功能
            function saveState() {
                undoStack.push(canvas.toDataURL());
                redoStack = [];
                updateUndoRedoButtons();
            }

            function updateUndoRedoButtons() {
                $('#undoBtn').prop('disabled', undoStack.length <= 1);
                $('#redoBtn').prop('disabled', redoStack.length === 0);
            }

            $('#undoBtn').click(function() {
                if (undoStack.length <= 1) return;
                
                redoStack.push(undoStack.pop());
                const lastState = undoStack[undoStack.length - 1];
                loadState(lastState);
                updateUndoRedoButtons();
            });

            $('#redoBtn').click(function() {
                if (redoStack.length === 0) return;
                
                const nextState = redoStack.pop();
                undoStack.push(nextState);
                loadState(nextState);
                updateUndoRedoButtons();
            });

            function loadState(state) {
                const img = new Image();
                img.onload = function() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0);
                };
                img.src = state;
            }

            // 保存功能
            $('#saveBtn').click(function() {
                const link = document.createElement('a');
                link.download = '编辑后的图片.png';
                link.href = canvas.toDataURL();
                link.click();
            });

            // 设置初始画笔属性
            ctx.strokeStyle = $('#brushColor').val();
            ctx.lineWidth = $('#brushSize').val();
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
        });
    </script>
</body>
</html>

到此这篇关于基于Javascript实现网页版的绘图板的文章就介绍到这了,更多相关Javascript绘图板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！