基于 HTML5 和 Canvas 开发的在线图片编辑器

标签：Canvas img ctx canvas height width 编辑器 HTML5

预览

技术栈

HTML5：构建用户界面，提供语义化标签。
CSS3：美化界面，增强用户体验。
JavaScript：处理用户交互，管理 Canvas 操作。
Canvas API：主要绘图工具，用于图像处理。

项目结构

image-editor/
│
├── index.html      // 主页面
├── style.css       // CSS样式
├── script.js       // JavaScript逻辑
└── images/         // 存放静态资源

实现步骤

1. HTML 结构

首先，在 index.html 中定义基本的页面结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线图片编辑器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="editor">
        <h1>在线图片编辑器</h1>
        <input type="file" id="fileInput" accept="image/*">
        <canvas id="canvas"></canvas>
        <div class="controls">
            <button id="cropBtn">裁剪</button>
            <button id="rotateBtn">旋转</button>
            <button id="filterBtn">应用滤镜</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS 样式

在 style.css 中设置基本的样式，使编辑器看起来更加美观：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.editor {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

canvas {
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

3. JavaScript 逻辑

在 script.js 中实现图像上传、绘制和编辑功能：

const fileInput = document.getElementById('fileInput');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let img = new Image();

fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
  
    reader.onload = function (e) {
        img.src = e.target.result;
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        };
    };
  
    if (file) {
        reader.readAsDataURL(file);
    }
});

document.getElementById('cropBtn').addEventListener('click', () => {
    // 简单的裁剪逻辑
    const cropWidth = img.width / 2;
    const cropHeight = img.height / 2;
    ctx.drawImage(img, cropWidth, cropHeight, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
});

document.getElementById('rotateBtn').addEventListener('click', () => {
    canvas.width = img.height;
    canvas.height = img.width;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(Math.PI / 2); // 90度旋转
    ctx.drawImage(img, -img.width / 2, -img.height / 2); // 绘制已旋转的图像
});

document.getElementById('filterBtn').addEventListener('click', () => {
    ctx.filter = 'grayscale(100%)';
    ctx.drawImage(img, 0, 0);
});

4. 功能实现展示

图片上传

用户可以通过 <input> 元素上传本地图片。我们使用 FileReader API 将文件读取为 Data URL，并在 Canvas 中绘制该图像。

图片裁剪

通过简单的裁剪逻辑，我们从原始图像中获取右下角的一部分，并绘制到 Canvas 上。

图片旋转

使用 translate 和 rotate 方法，我们可以实现图像的 90 度旋转。

应用滤镜

通过 Canvas 的 filter 属性，可以轻松应用各种滤镜。在这个例子中，我们使用了灰度滤镜。

扩展功能

1. 颜色调整

可以实现亮度、对比度等颜色调整功能。

2. 撤销/重做

提供基本的图像修改记录，允许用户撤销或重做操作。

3. 保存编辑结果

允许用户将编辑后的图像保存到本地。

4. 其他滤镜

实现更多滤镜效果，例如模糊、复古等。

总结

利用 HTML5 和 Canvas 技术，我们可以开开发一个功能完善的在线图片编辑器。上面的示例展示了如何构建基础功能，进一步的扩展可以丰富其功能，使其能满足更多用户需求。希望这篇文章能帮助你更好地理解 Canvas 的使用，并激励你开发出更复杂的图像处理工具。

标签：Canvas,img,ctx,canvas,height,width,编辑器,HTML5
From： https://www.cnblogs.com/net19880504/p/18318984