使用Canvas在前端绘制直线切割图片并用C#代码实现图片切割功能

本文介绍了使用 JavaScript 和 Canvas 在前端绘制直线并获取坐标，然后使用 C# 代码根据坐标信息将图片进行切割的功能。文章包括详细的代码示例，并解释了实现原理。

前端代码（JavaScript）

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var lines = [];

// 加载图片
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

// 绘制直线
var isDrawing = false;
var startX, startY;

canvas.addEventListener('mousedown', function(e) {
  startX = e.clientX - canvas.offsetLeft;
  startY = e.clientY - canvas.offsetTop;
  isDrawing = true;
});

canvas.addEventListener('mousemove', function(e) {
  if (!isDrawing) return;
  
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;
  
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(x, y);
  ctx.stroke();
  
  lines.push({ startX, startY, endX: x, endY: y });
  
  startX = x;
  startY = y;
});

canvas.addEventListener('mouseup', function() {
  isDrawing = false;
  console.log(lines);
});

后端代码（C#）

using System.Drawing;

public class ImageCutter
{
    public static void CutAndSaveImages(string imagePath, string outputFolder, int width, int height, Line[] lines, bool isHorizontal)
    {
        var image = Image.FromFile(imagePath);
        var index = 0;

        foreach (var line in lines)
        {
            var rect = isHorizontal ? new Rectangle(line.startX, line.startY, width, height) : new Rectangle(line.startX, line.startY, height, width);
            var croppedImage = CropImage(image, rect);
            croppedImage.Save($'{outputFolder}\image_{index}.jpg');

            index++;
        }
    }

    private static Image CropImage(Image image, Rectangle cropArea)
    {
        var bmpImage = new Bitmap(image);
        return bmpImage.Clone(cropArea, bmpImage.PixelFormat);
    }
}

public class Line
{
    public int startX { get; set; }
    public int startY { get; set; }
    public int endX { get; set; }
    public int endY { get; set; }
}

代码解析

前端代码

使用canvas元素绘制图片并监听鼠标事件。
在mousedown事件中记录鼠标按下时的坐标作为起始点，并将isDrawing设为true。
在mousemove事件中，如果isDrawing为true，则绘制直线并记录直线的起始和终点坐标。
在mouseup事件中将isDrawing设为false，并打印所有直线的坐标数组。

后端代码

接收前端传递的图片路径、输出文件夹路径、切割后的宽度和高度、线条坐标数组、是否水平切割的参数。
根据坐标信息和参数，使用Graphics.DrawImage方法切割图片。
将切割后的图片保存到指定的输出文件夹中。

总结

本文提供了一个使用 Canvas 在前端绘制直线切割图片并用 C# 代码实现图片切割功能的完整示例。代码逻辑清晰，便于理解和扩展。开发者可以根据实际需要修改代码，实现更复杂的功能。