使用Canvas和JavaScript实现图片编辑功能

本文介绍了如何使用Canvas和JavaScript实现一个简单的图片编辑功能，可以从网络获取图片，并向其添加可移动、可缩放的贴纸元素，还包括清空贴纸元素的功能。

需求

从网络上获取一张图片。
可以在该图片上添加贴纸元素。
贴纸元素可以移动。
可以拖拽贴纸元素的边框放大和缩小。
可以清空贴纸元素内容。

实现步骤

创建canvas元素并获取上下文，将图片绘制到canvas中。
监听鼠标事件，当鼠标点击canvas时，判断点击位置是否在贴纸元素中，如果是，则选中该元素。
当鼠标移动时，判断是否有元素被选中，如果有，则移动该元素。
当鼠标按下并拖拽元素边框时，改变元素的大小。
当清空按钮被点击时，清空所有贴纸元素。

代码实现

HTML部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' />
    <title>图片编辑器</title>
    <style>
      canvas {
        border: 1px solid black;
      }
      .sticker {
        position: absolute;
        border: 1px dotted red;
        cursor: move;
      }
      .deleteBtn {
        position: absolute;
        right: 0;
        top: 0;
        background-color: red;
        color: white;
        font-size: 12px;
        padding: 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <canvas id='canvas' width='800' height='600'></canvas>
    <button id='clearBtn'>清空</button>
  </body>
  <script src='./index.js'></script>
</html>

JavaScript部分

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const clearBtn = document.getElementById('clearBtn');
const stickers = [];

// 加载图片
const img = new Image();
img.onload = function () {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = 'https://picsum.photos/800/600';

// 添加贴纸元素
function addSticker(x, y) {
  const sticker = document.createElement('div');
  sticker.className = 'sticker';
  sticker.style.left = x + 'px';
  sticker.style.top = y + 'px';
  const deleteBtn = document.createElement('div');
  deleteBtn.className = 'deleteBtn';
  deleteBtn.innerHTML = '删除';
  deleteBtn.addEventListener('click', function () {
    sticker.remove();
    stickers.splice(stickers.indexOf(sticker), 1);
  });
  sticker.appendChild(deleteBtn);
  document.body.appendChild(sticker);
  stickers.push(sticker);
}

// 监听鼠标事件
let selectedSticker = null;
let isDragging = false;
let isResizing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', function (e) {
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;
  selectedSticker = null;
  for (let i = stickers.length - 1; i >= 0; i--) {
    const sticker = stickers[i];
    const rect = sticker.getBoundingClientRect();
    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
      selectedSticker = sticker;
      lastX = x;
      lastY = y;
      isDragging = true;
      isResizing = false;
      break;
    } else if (
      x >= rect.right - 10 &&
      x <= rect.right &&
      y >= rect.bottom - 10 &&
      y <= rect.bottom
    ) {
      selectedSticker = sticker;
      lastX = x;
      lastY = y;
      isDragging = false;
      isResizing = true;
      break;
    }
  }
});

canvas.addEventListener('mousemove', function (e) {
  if (isDragging) {
    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;
    selectedSticker.style.left = parseInt(selectedSticker.style.left) + x - lastX + 'px';
    selectedSticker.style.top = parseInt(selectedSticker.style.top) + y - lastY + 'px';
    lastX = x;
    lastY = y;
  } else if (isResizing) {
    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;
    const width = parseInt(selectedSticker.style.width) + x - lastX;
    const height = parseInt(selectedSticker.style.height) + y - lastY;
    selectedSticker.style.width = width + 'px';
    selectedSticker.style.height = height + 'px';
    lastX = x;
    lastY = y;
  }
});

canvas.addEventListener('mouseup', function (e) {
  isDragging = false;
  isResizing = false;
});

// 清空贴纸元素
clearBtn.addEventListener('click', function () {
  while (stickers.length > 0) {
    stickers.pop().remove();
  }
});

// 添加贴纸元素
canvas.addEventListener('dblclick', function (e) {
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;
  addSticker(x, y);
});

总结

本文介绍了使用Canvas和JavaScript实现图片编辑功能的基本步骤，并提供了相应的代码示例。您可以根据自己的需求进行扩展和修改，例如添加更多贴纸元素类型、实现更丰富的编辑功能等。