恋恋风辰的官方博客

实现头像编辑框
Posted on 2025-05-11 13:13:09 by 恋恋风辰 | In C++ | 原文链接

前情回顾

前文我们实现了心跳，今天来实现头像框裁剪的功能，为以后头像上传和资源服务器做准备。

大体上头像上传框的效果如下

image-20250511075018888

添加设置页面

我们需要在聊天对话框左侧添加设置按钮

image-20250511075548367

左侧设置按钮是我们封装的类StateWidget

image-20250511075648519

右侧添加UserInfoPage界面

image-20250511075822544

UserInfoPage界面布局

image-20250511082150907

属性表

image-20250511082230811

头像裁剪逻辑

点击上传按钮

  1. //上传头像
  2. void UserInfoPage::on_up_btn_clicked()
  3. {
  4.     // 1. 让对话框也能选 *.webp
  5.     QString filename = QFileDialog::getOpenFileName(
  6.         this,
  7.         tr("选择图片"),
  8.         QString(),
  9.         tr("图片文件 (*.png *.jpg *.jpeg *.bmp *.webp)")
  10.     );
  11.     if (filename.isEmpty())
  12.         return;
  14.     // 2. 直接用 QPixmap::load() 加载，无需手动区分格式
  15.     QPixmap inputImage;
  16.     if (!inputImage.load(filename)) {
  17.         QMessageBox::critical(
  18.             this,
  19.             tr("错误"),
  20.             tr("加载图片失败！请确认已部署 WebP 插件。"),
  21.             QMessageBox::Ok
  22.         );
  23.         return;
  24.     }
  26.     QPixmap image = ImageCropperDialog::getCroppedImage(filename, 600, 400, CropperShape::CIRCLE);
  27.     if (image.isNull())
  28.         return;
  30.     QPixmap scaledPixmap = image.scaled( ui->head_lb->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation); // 将图片缩放到label的大小
  31.     ui->head_lb->setPixmap(scaledPixmap); // 将缩放后的图片设置到QLabel上
  32.     ui->head_lb->setScaledContents(true); // 设置QLabel自动缩放图片内容以适应大小
  34.     QString storageDir = QStandardPaths::writableLocation(
  35.                              QStandardPaths::AppDataLocation);
  36.     // 2. 在其下再建一个 avatars 子目录
  37.     QDir dir(storageDir);
  38.     if (!dir.exists("avatars")) {
  39.         if (!dir.mkpath("avatars")) {
  40.             qWarning() << "无法创建 avatars 目录：" << dir.filePath("avatars");
  41.             QMessageBox::warning(
  42.                 this,
  43.                 tr("错误"),
  44.                 tr("无法创建存储目录，请检查权限或磁盘空间。")
  45.             );
  46.             return;
  47.         }
  48.     }
  49.     // 3. 拼接最终的文件名 head.png
  50.     QString filePath = dir.filePath("avatars/head.png");
  52.     // 4. 保存 scaledPixmap 为 PNG（无损、最高质量）
  53.     if (!scaledPixmap.save(filePath, "PNG")) {
  54.         QMessageBox::warning(
  55.             this,
  56.             tr("保存失败"),
  57.             tr("头像保存失败，请检查权限或磁盘空间。")
  58.         );
  59.     } else {
  60.         qDebug() << "头像已保存到：" << filePath;
  61.         // 以后读取直接用同一路径：storageDir/avatars/head.png
  62.     }
  63. }

内部调用了我们的ImageCropperDialog，弹出对话框后会显示裁剪图片的界面。

接下来我们看看ImageCropperDialog实现

  1. #ifndef IMAGECROPPER_H
  2. #define IMAGECROPPER_H
  4. #include <QWidget>
  5. #include <QDialog>
  6. #include <QPainter>
  7. #include <QLabel>
  8. #include <QPixmap>
  9. #include <QString>
  10. #include <QMessageBox>
  11. #include <QHBoxLayout>
  12. #include <QVBoxLayout>
  13. #include <QPushButton>
  15. #include "imagecropperlabel.h"
  17. /*******************************************************
  18.  *  Loacl private class, which do image-cropping
  19.  *  Used in class ImageCropper
  20. *******************************************************/
  21. class ImageCropperDialogPrivate : public QDialog {
  22.     Q_OBJECT
  23. public:
  24.     ImageCropperDialogPrivate(const QPixmap& imageIn, QPixmap& outputImage,
  25.                               int windowWidth, int windowHeight,
  26.                               CropperShape shape, QSize cropperSize = QSize()) :
  27.         QDialog(nullptr),  outputImage(outputImage)
  28.     {
  29.         this->setAttribute(Qt::WA_DeleteOnClose, true);
  30.         this->setWindowTitle("Image Cropper");
  31.         this->setMouseTracking(true);
  32.         this->setModal(true);
  34.         imageLabel = new ImageCropperLabel(windowWidth, windowHeight, this);
  35.         imageLabel->setCropper(shape, cropperSize);
  36.         imageLabel->setOutputShape(OutputShape::RECT);
  37.         imageLabel->setOriginalImage(imageIn);
  38.         imageLabel->enableOpacity(true);
  40.         QHBoxLayout* btnLayout = new QHBoxLayout();
  41.         btnOk = new QPushButton("OK", this);
  42.         btnCancel = new QPushButton("Cancel", this);
  43.         btnLayout->addStretch();
  44.         btnLayout->addWidget(btnOk);
  45.         btnLayout->addWidget(btnCancel);
  47.         QVBoxLayout* mainLayout = new QVBoxLayout(this);
  48.         mainLayout->addWidget(imageLabel);
  49.         mainLayout->addLayout(btnLayout);
  51.         connect(btnOk, &QPushButton::clicked, this, [this](){
  52.             this->outputImage = this->imageLabel->getCroppedImage();
  53.             this->close();
  54.         });
  55.         connect(btnCancel, &QPushButton::clicked, this, [this](){
  56.             this->outputImage = QPixmap();
  57.             this->close();
  58.         });
  59.     }
  61. private:
  62.     ImageCropperLabel* imageLabel;
  63.     QPushButton* btnOk;
  64.     QPushButton* btnCancel;
  65.     QPixmap& outputImage;
  66. };
  69. /*******************************************************************
  70.  *  class ImageCropperDialog
  71.  *      create a instane of class ImageCropperDialogPrivate
  72.  *      and get cropped image from the instance(after closing)
  73. ********************************************************************/
  74. class ImageCropperDialog : QObject {
  75. public:
  76.     static QPixmap getCroppedImage(const QString& filename,int windowWidth, int windowHeight,
  77.                                    CropperShape cropperShape, QSize crooperSize = QSize())
  78.     {
  79.         QPixmap inputImage;
  80.         QPixmap outputImage;
  82.         if (!inputImage.load(filename)) {
  83.             QMessageBox::critical(nullptr, "Error", "Load image failed!", QMessageBox::Ok);
  84.             return outputImage;
  85.         }
  87.         ImageCropperDialogPrivate* imageCropperDo =
  88.             new ImageCropperDialogPrivate(inputImage, outputImage,
  89.                                           windowWidth, windowHeight,
  90.                                           cropperShape, crooperSize);
  91.         imageCropperDo->exec();
  93.         return outputImage;
  94.     }
  95. };
  99. #endif // IMAGECROPPER_H

私有对话框

  1. 继承自 QDialog
    • QDialog(nullptr)：以无父窗口方式创建，独立弹出。
    • Qt::WA_DeleteOnClose：关闭时自动 delete 对象，防止内存泄漏。
    • setModal(true)：对话框模式，阻塞主窗口输入。
  2. 成员变量
    • ImageCropperLabel* imageLabel：自定义裁剪视图。
    • QPushButton* btnOk, btnCancel：确认/取消按钮。
    • QPixmap& outputImage：引用外部提供的 QPixmap，用来保存裁剪结果。
  3. 布局管理
    • 水平布局 (QHBoxLayout) 放置按钮并居右。
    • 垂直布局 (QVBoxLayout) 先是大图，再是按钮区。
  4. Lambda 连接信号与槽
    • OK 时，将裁剪后的图像复制给外部引用，然后 close()。
    • Cancel 时，将 outputImage 置空，表示用户放弃裁剪。

静态对话框

  • 统一接口：只要一行 ImageCropperDialog::getCroppedImage(…)，就能弹出裁剪 UI 并获取结果。
  • 输入合法性检查：先用 QPixmap::load() 加载文件，失败则弹错并返回空图。
  • 阻塞执行：exec() 会进入本地事件循环，直到用户点击 OK/Cancel 关闭对话框。
  • 返回结果：通过外部引用 outputImage 将裁剪结果“带出”函数作用域。

image-20250511112606921

头像裁剪控件

头文件声明

  1. /*************************************************************************
  2.  *  class:          ImageCropperLabel
  3.  *  author:         github@Leopard-C
  4.  *  email:          leopard.c@outlook.com
  5.  *  last change:    2020-03-06
  6. *************************************************************************/
  7. #ifndef IMAGECROPPERLABEL_H
  8. #define IMAGECROPPERLABEL_H
  10. #include <QLabel>
  11. #include <QPixmap>
  12. #include <QPen>
  14. enum class CropperShape {
  15.     UNDEFINED     = 0,
  16.     RECT          = 1,
  17.     SQUARE        = 2,
  18.     FIXED_RECT    = 3,
  19.     ELLIPSE       = 4,
  20.     CIRCLE        = 5,
  21.     FIXED_ELLIPSE = 6
  22. };
  24. enum class OutputShape {
  25.     RECT    = 0,
  26.     ELLIPSE = 1
  27. };
  29. enum class SizeType {
  30.     fixedSize           = 0,
  31.     fitToMaxWidth       = 1,
  32.     fitToMaxHeight      = 2,
  33.     fitToMaxWidthHeight = 3,
  34. };
  37. class ImageCropperLabel : public QLabel {
  38.     Q_OBJECT
  39. public:
  40.     ImageCropperLabel(int width, int height, QWidget* parent);
  42.     void setOriginalImage(const QPixmap& pixmap);
  43.     void setOutputShape(OutputShape shape) { outputShape = shape; }
  44.     QPixmap getCroppedImage();
  45.     QPixmap getCroppedImage(OutputShape shape);
  47.     /*****************************************
  48.      * Set cropper's shape
  49.     *****************************************/
  50.     void setRectCropper();
  51.     void setSquareCropper();
  52.     void setEllipseCropper();
  53.     void setCircleCropper();
  54.     void setFixedRectCropper(QSize size);
  55.     void setFixedEllipseCropper(QSize size);
  56.     void setCropper(CropperShape shape, QSize size);    // not recommended
  58.     /*****************************************************************************
  59.      * Set cropper's fixed size
  60.     *****************************************************************************/
  61.     void setCropperFixedSize(int fixedWidth, int fixedHeight);
  62.     void setCropperFixedWidth(int fixedWidht);
  63.     void setCropperFixedHeight(int fixedHeight);
  65.     /*****************************************************************************
  66.      * Set cropper's minimum size
  67.      * default: the twice of minimum of the edge lenght of drag square
  68.     *****************************************************************************/
  69.     void setCropperMinimumSize(int minWidth, int minHeight)
  70.         { cropperMinimumWidth = minWidth; cropperMinimumHeight = minHeight; }
  71.     void setCropperMinimumWidth(int minWidth) { cropperMinimumWidth = minWidth; }
  72.     void setCropperMinimumHeight(int minHeight) { cropperMinimumHeight = minHeight; }
  74.     /*************************************************
  75.      * Set the size, color, visibility of rectangular border
  76.     *************************************************/
  77.     void setShowRectBorder(bool show) { isShowRectBorder = show; }
  78.     QPen getBorderPen() { return borderPen; }
  79.     void setBorderPen(const QPen& pen) { borderPen = pen; }
  81.     /*************************************************
  82.      * Set the size, color of drag square
  83.     *************************************************/
  84.     void setShowDragSquare(bool show) { isShowDragSquare = show; }
  85.     void setDragSquareEdge(int edge) { dragSquareEdge = (edge >= 3 ? edge : 3); }
  86.     void setDragSquareColor(const QColor& color) { dragSquareColor = color; }
  88.     /*****************************************
  89.      *  Opacity Effect
  90.     *****************************************/
  91.     void enableOpacity(bool b = true) { isShowOpacityEffect = b; }
  92.     void setOpacity(double newOpacity) { opacity = newOpacity; }
  94. signals:
  95.     void croppedImageChanged();
  97. protected:
  98.     /*****************************************
  99.      * Event
  100.     *****************************************/
  101.     virtual void paintEvent(QPaintEvent *event) override;
  102.     virtual void mousePressEvent(QMouseEvent *e) override;
  103.     virtual void mouseMoveEvent(QMouseEvent *e) override;
  104.     virtual void mouseReleaseEvent(QMouseEvent *e) override;
  106. private:
  107.     /***************************************
  108.      * Draw shapes
  109.     ***************************************/
  110.     void drawFillRect(QPoint centralPoint, int edge, QColor color);
  111.     void drawRectOpacity();
  112.     void drawEllipseOpacity();
  113.     void drawOpacity(const QPainterPath& path);     // shadow effect
  114.     void drawSquareEdge(bool onlyFourCorners);
  116.     /***************************************
  117.      * Other utility methods
  118.     ***************************************/
  119.     int getPosInCropperRect(const QPoint& pt);
  120.     bool isPosNearDragSquare(const QPoint& pt1, const QPoint& pt2);
  121.     void resetCropperPos();
  122.     void changeCursor();
  124.     enum {
  125.         RECT_OUTSIZD = 0,
  126.         RECT_INSIDE = 1,
  127.         RECT_TOP_LEFT, RECT_TOP, RECT_TOP_RIGHT, RECT_RIGHT,
  128.         RECT_BOTTOM_RIGHT, RECT_BOTTOM, RECT_BOTTOM_LEFT, RECT_LEFT
  129.     };
  131.     const bool ONLY_FOUR_CORNERS = true;
  133. private:
  134.     QPixmap originalImage;
  135.     QPixmap tempImage;
  137.     bool isShowRectBorder = true;
  138.     QPen borderPen;
  140.     CropperShape cropperShape = CropperShape::UNDEFINED;
  141.     OutputShape  outputShape  = OutputShape::RECT;
  143.     QRect imageRect;     // the whole image area in the label (not real size)
  144.     QRect cropperRect;     // a rectangle frame to choose image area (not real size)
  145.     QRect cropperRect_;     // cropper rect (real size)
  146.     double scaledRate = 1.0;
  148.     bool isLButtonPressed = false;
  149.     bool isCursorPosCalculated = false;
  150.     int  cursorPosInCropperRect = RECT_OUTSIZD;
  151.     QPoint lastPos;
  152.     QPoint currPos;
  154.     bool isShowDragSquare = true;
  155.     int dragSquareEdge = 8;
  156.     QColor dragSquareColor = Qt::white;
  158.     int cropperMinimumWidth = dragSquareEdge * 2;
  159.     int cropperMinimumHeight = dragSquareEdge * 2;
  161.     bool isShowOpacityEffect = false;
  162.     double opacity = 0.6;
  163. };
  165. #endif // IMAGECROPPERLABEL_H

具体实现

  1. #include "imagecropperlabel.h"
  3. #include <QPainter>
  4. #include <QPainterPath>
  5. #include <QMouseEvent>
  6. #include <QDebug>
  7. #include <QBitmap>
  9. ImageCropperLabel::ImageCropperLabel(int width, int height, QWidget* parent) :
  10.          QLabel(parent)
  11. {
  12.     this->setFixedSize(width, height);
  13.     this->setAlignment(Qt::AlignCenter);
  14.     this->setMouseTracking(true);
  16.     borderPen.setWidth(1);
  17.     borderPen.setColor(Qt::white);
  18.     borderPen.setDashPattern(QVector<qreal>() << 3 << 3 << 3 << 3);
  19. }
  21. void ImageCropperLabel::setOriginalImage(const QPixmap &pixmap) {
  22.     originalImage = pixmap;
  24.     int imgWidth = pixmap.width();
  25.     int imgHeight = pixmap.height();
  26.     int labelWidth = this->width();
  27.     int labelHeight = this->height();
  28.     int imgWidthInLabel;
  29.     int imgHeightInLabel;
  31.     if (imgWidth * labelHeight < imgHeight * labelWidth) {
  32.         scaledRate = labelHeight / double(imgHeight);
  33.         imgHeightInLabel = labelHeight;
  34.         imgWidthInLabel = int(scaledRate * imgWidth);
  35.         imageRect.setRect((labelWidth - imgWidthInLabel) / 2, 0,
  36.                           imgWidthInLabel, imgHeightInLabel);
  37.     }
  38.     else {
  39.         scaledRate = labelWidth / double(imgWidth);
  40.         imgWidthInLabel = labelWidth;
  41.         imgHeightInLabel = int(scaledRate * imgHeight);
  42.         imageRect.setRect(0, (labelHeight - imgHeightInLabel) / 2,
  43.                           imgWidthInLabel, imgHeightInLabel);
  44.     }
  46.     tempImage = originalImage.scaled(imgWidthInLabel, imgHeightInLabel,
  47.                                      Qt::KeepAspectRatio, Qt::SmoothTransformation);
  48.     this->setPixmap(tempImage);
  50.     if (cropperShape >= CropperShape::FIXED_RECT) {
  51.         cropperRect.setWidth(int(cropperRect_.width() * scaledRate));
  52.         cropperRect.setHeight(int(cropperRect_.height() * scaledRate));
  53.     }
  54.     resetCropperPos();
  55. }
  58. /*****************************************
  59.  * set cropper's shape (and size)
  60. *****************************************/
  61. void ImageCropperLabel::setRectCropper() {
  62.     cropperShape = CropperShape::RECT;
  63.     resetCropperPos();
  64. }
  66. void ImageCropperLabel::setSquareCropper() {
  67.     cropperShape = CropperShape::SQUARE;
  68.     resetCropperPos();
  69. }
  71. void ImageCropperLabel::setEllipseCropper() {
  72.     cropperShape = CropperShape::ELLIPSE;
  73.     resetCropperPos();
  74. }
  76. void ImageCropperLabel::setCircleCropper() {
  77.     cropperShape = CropperShape::CIRCLE;
  78.     resetCropperPos();
  79. }
  81. void ImageCropperLabel::setFixedRectCropper(QSize size) {
  82.     cropperShape = CropperShape::FIXED_RECT;
  83.     cropperRect_.setSize(size);
  84.     resetCropperPos();
  85. }
  87. void ImageCropperLabel::setFixedEllipseCropper(QSize size) {
  88.     cropperShape = CropperShape::FIXED_ELLIPSE;
  89.     cropperRect_.setSize(size);
  90.     resetCropperPos();
  91. }
  93. // not recommended
  94. void ImageCropperLabel::setCropper(CropperShape shape, QSize size) {
  95.     cropperShape = shape;
  96.     cropperRect_.setSize(size);
  97.     resetCropperPos();
  98. }
  100. /*****************************************************************************
  101.      * Set cropper's fixed size
  102.     *****************************************************************************/
  103. void ImageCropperLabel::setCropperFixedSize(int fixedWidth, int fixedHeight) {
  104.     cropperRect_.setSize(QSize(fixedWidth, fixedHeight));
  105.     resetCropperPos();
  106. }
  108. void ImageCropperLabel::setCropperFixedWidth(int fixedWidth) {
  109.     cropperRect_.setWidth(fixedWidth);
  110.     resetCropperPos();
  111. }
  113. void ImageCropperLabel::setCropperFixedHeight(int fixedHeight) {
  114.     cropperRect_.setHeight(fixedHeight);
  115.     resetCropperPos();
  116. }
  118. /**********************************************
  119.  * Move cropper to the center of the image
  120.  * And resize to default
  121. **********************************************/
  122. void ImageCropperLabel::resetCropperPos() {
  123.     int labelWidth = this->width();
  124.     int labelHeight = this->height();
  126.     if (cropperShape == CropperShape::FIXED_RECT || cropperShape == CropperShape::FIXED_ELLIPSE) {
  127.         cropperRect.setWidth(int(cropperRect_.width() * scaledRate));
  128.         cropperRect.setHeight(int(cropperRect_.height() * scaledRate));
  129.     }
  131.     switch (cropperShape) {
  132.         case CropperShape::UNDEFINED:
  133.             break;
  134.         case CropperShape::FIXED_RECT:
  135.         case CropperShape::FIXED_ELLIPSE: {
  136.             cropperRect.setRect((labelWidth - cropperRect.width()) / 2,
  137.                              (labelHeight - cropperRect.height()) / 2,
  138.                              cropperRect.width(), cropperRect.height());
  139.             break;
  140.         }
  141.         case CropperShape::RECT:
  142.         case CropperShape::SQUARE:
  143.         case CropperShape::ELLIPSE:
  144.         case CropperShape::CIRCLE: {
  145.             int imgWidth = tempImage.width();
  146.             int imgHeight = tempImage.height();
  147.             int edge = int((imgWidth > imgHeight ? imgHeight : imgWidth) * 3 / 4.0);
  148.             cropperRect.setRect((labelWidth - edge) / 2, (labelHeight - edge) / 2, edge, edge);
  149.             break;
  150.         }
  151.     }
  152. }
  154. QPixmap ImageCropperLabel::getCroppedImage() {
  155.     return getCroppedImage(this->outputShape);
  156. }
  158. QPixmap ImageCropperLabel::getCroppedImage(OutputShape shape) {
  159.     int startX = int((cropperRect.left() - imageRect.left()) / scaledRate);
  160.     int startY = int((cropperRect.top() - imageRect.top()) / scaledRate);
  161.     int croppedWidth = int(cropperRect.width() / scaledRate);
  162.     int croppedHeight = int(cropperRect.height() / scaledRate);
  164.     QPixmap resultImage(croppedWidth, croppedHeight);
  165.     resultImage = originalImage.copy(startX, startY, croppedWidth, croppedHeight);
  167.     // Set ellipse mask (cut to ellipse shape)
  168.     if (shape == OutputShape::ELLIPSE) {
  169.         QSize size(croppedWidth, croppedHeight);
  170.         QBitmap mask(size);
  171.         QPainter painter(&mask);
  172.         painter.setRenderHint(QPainter::Antialiasing);
  173.         painter.setRenderHint(QPainter::SmoothPixmapTransform);
  174.         painter.fillRect(0, 0, size.width(), size.height(), Qt::white);
  175.         painter.setBrush(QColor(0, 0, 0));
  176.         painter.drawRoundRect(0, 0, size.width(), size.height(), 99, 99);
  177.         resultImage.setMask(mask);
  178.     }
  180.     return resultImage;
  181. }
  184. void ImageCropperLabel::paintEvent(QPaintEvent *event) {
  185.     // Draw original image
  186.     QLabel::paintEvent(event);
  188.     // Draw cropper and set some effects
  189.     switch (cropperShape) {
  190.         case CropperShape::UNDEFINED:
  191.             break;
  192.         case CropperShape::FIXED_RECT:
  193.             drawRectOpacity();
  194.             break;
  195.         case CropperShape::FIXED_ELLIPSE:
  196.             drawEllipseOpacity();
  197.             break;
  198.         case CropperShape::RECT:
  199.             drawRectOpacity();
  200.             drawSquareEdge(!ONLY_FOUR_CORNERS);
  201.             break;
  202.         case CropperShape::SQUARE:
  203.             drawRectOpacity();
  204.             drawSquareEdge(ONLY_FOUR_CORNERS);
  205.             break;
  206.         case CropperShape::ELLIPSE:
  207.             drawEllipseOpacity();
  208.             drawSquareEdge(!ONLY_FOUR_CORNERS);
  209.             break;
  210.         case CropperShape::CIRCLE:
  211.             drawEllipseOpacity();
  212.             drawSquareEdge(ONLY_FOUR_CORNERS);
  213.             break;
  214.     }
  216.     // Draw cropper rect
  217.     if (isShowRectBorder) {
  218.         QPainter painter(this);
  219.         painter.setPen(borderPen);
  220.         painter.drawRect(cropperRect);
  221.     }
  222. }
  224. void ImageCropperLabel::drawSquareEdge(bool onlyFourCorners) {
  225.     if (!isShowDragSquare)
  226.         return;
  228.     // Four corners
  229.     drawFillRect(cropperRect.topLeft(), dragSquareEdge, dragSquareColor);
  230.     drawFillRect(cropperRect.topRight(), dragSquareEdge, dragSquareColor);
  231.     drawFillRect(cropperRect.bottomLeft(), dragSquareEdge, dragSquareColor);
  232.     drawFillRect(cropperRect.bottomRight(), dragSquareEdge, dragSquareColor);
  234.     // Four edges
  235.     if (!onlyFourCorners) {
  236.         int centralX = cropperRect.left() + cropperRect.width() / 2;
  237.         int centralY = cropperRect.top() + cropperRect.height() / 2;
  238.         drawFillRect(QPoint(cropperRect.left(), centralY), dragSquareEdge, dragSquareColor);
  239.         drawFillRect(QPoint(centralX, cropperRect.top()), dragSquareEdge, dragSquareColor);
  240.         drawFillRect(QPoint(cropperRect.right(), centralY), dragSquareEdge, dragSquareColor);
  241.         drawFillRect(QPoint(centralX, cropperRect.bottom()), dragSquareEdge, dragSquareColor);
  242.     }
  243. }
  245. void ImageCropperLabel::drawFillRect(QPoint centralPoint, int edge, QColor color) {
  246.     QRect rect(centralPoint.x() - edge / 2, centralPoint.y() - edge / 2, edge, edge);
  247.     QPainter painter(this);
  248.     painter.fillRect(rect, color);
  249. }
  251. // Opacity effect
  252. void ImageCropperLabel::drawOpacity(const QPainterPath& path) {
  253.     QPainter painterOpac(this);
  254.     painterOpac.setOpacity(opacity);
  255.     painterOpac.fillPath(path, QBrush(Qt::black));
  256. }
  258. void ImageCropperLabel::drawRectOpacity() {
  259.     if (isShowOpacityEffect) {
  260.         QPainterPath p1, p2, p;
  261.         p1.addRect(imageRect);
  262.         p2.addRect(cropperRect);
  263.         p = p1.subtracted(p2);
  264.         drawOpacity(p);
  265.     }
  266. }
  268. void ImageCropperLabel::drawEllipseOpacity() {
  269.     if (isShowOpacityEffect) {
  270.         QPainterPath p1, p2, p;
  271.         p1.addRect(imageRect);
  272.         p2.addEllipse(cropperRect);
  273.         p = p1.subtracted(p2);
  274.         drawOpacity(p);
  275.     }
  276. }
  278. bool ImageCropperLabel::isPosNearDragSquare(const QPoint& pt1, const QPoint& pt2) {
  279.     return abs(pt1.x() - pt2.x()) * 2 <= dragSquareEdge
  280.            && abs(pt1.y() - pt2.y()) * 2 <= dragSquareEdge;
  281. }
  283. int ImageCropperLabel::getPosInCropperRect(const QPoint &pt) {
  284.     if (isPosNearDragSquare(pt, QPoint(cropperRect.right(), cropperRect.center().y())))
  285.         return RECT_RIGHT;
  286.     if (isPosNearDragSquare(pt, cropperRect.bottomRight()))
  287.         return RECT_BOTTOM_RIGHT;
  288.     if (isPosNearDragSquare(pt, QPoint(cropperRect.center().x(), cropperRect.bottom())))
  289.         return RECT_BOTTOM;
  290.     if (isPosNearDragSquare(pt, cropperRect.bottomLeft()))
  291.         return RECT_BOTTOM_LEFT;
  292.     if (isPosNearDragSquare(pt, QPoint(cropperRect.left(), cropperRect.center().y())))
  293.         return RECT_LEFT;
  294.     if (isPosNearDragSquare(pt, cropperRect.topLeft()))
  295.         return RECT_TOP_LEFT;
  296.     if (isPosNearDragSquare(pt, QPoint(cropperRect.center().x(), cropperRect.top())))
  297.         return RECT_TOP;
  298.     if (isPosNearDragSquare(pt, cropperRect.topRight()))
  299.         return RECT_TOP_RIGHT;
  300.     if (cropperRect.contains(pt, true))
  301.         return RECT_INSIDE;
  302.     return RECT_OUTSIZD;
  303. }
  305. /*************************************************
  306.  *
  307.  *  Change mouse cursor type
  308.  *      Arrow, SizeHor, SizeVer, etc...
  309.  *
  310. *************************************************/
  312. void ImageCropperLabel::changeCursor() {
  313.     switch (cursorPosInCropperRect) {
  314.         case RECT_OUTSIZD:
  315.             setCursor(Qt::ArrowCursor);
  316.             break;
  317.         case RECT_BOTTOM_RIGHT: {
  318.             switch (cropperShape) {
  319.             case CropperShape::SQUARE:
  320.             case CropperShape::CIRCLE:
  321.             case CropperShape::RECT:
  322.             case CropperShape::ELLIPSE:
  323.                 setCursor(Qt::SizeFDiagCursor);
  324.                 break;
  325.             default:
  326.                 break;
  327.             }
  328.             break;
  329.         }
  330.         case RECT_RIGHT: {
  331.             switch (cropperShape) {
  332.             case CropperShape::RECT:
  333.             case CropperShape::ELLIPSE:
  334.                 setCursor(Qt::SizeHorCursor);
  335.                 break;
  336.             default:
  337.                 break;
  338.             }
  339.             break;
  340.         }
  341.         case RECT_BOTTOM: {
  342.             switch (cropperShape) {
  343.             case CropperShape::RECT:
  344.             case CropperShape::ELLIPSE:
  345.                 setCursor(Qt::SizeVerCursor);
  346.                 break;
  347.             default:
  348.                 break;
  349.             }
  350.             break;
  351.         }
  352.         case RECT_BOTTOM_LEFT: {
  353.             switch (cropperShape) {
  354.             case CropperShape::RECT:
  355.             case CropperShape::ELLIPSE:
  356.             case CropperShape::SQUARE:
  357.             case CropperShape::CIRCLE:
  358.                 setCursor(Qt::SizeBDiagCursor);
  359.                 break;
  360.             default:
  361.                 break;
  362.             }
  363.             break;
  364.         }
  365.         case RECT_LEFT: {
  366.             switch (cropperShape) {
  367.             case CropperShape::RECT:
  368.             case CropperShape::ELLIPSE:
  369.                 setCursor(Qt::SizeHorCursor);
  370.                 break;
  371.             default:
  372.                 break;
  373.             }
  374.             break;
  375.         }
  376.         case RECT_TOP_LEFT: {
  377.             switch (cropperShape) {
  378.             case CropperShape::RECT:
  379.             case CropperShape::ELLIPSE:
  380.             case CropperShape::SQUARE:
  381.             case CropperShape::CIRCLE:
  382.                 setCursor(Qt::SizeFDiagCursor);
  383.                 break;
  384.             default:
  385.                 break;
  386.             }
  387.             break;
  388.         }
  389.         case RECT_TOP: {
  390.             switch (cropperShape) {
  391.             case CropperShape::RECT:
  392.             case CropperShape::ELLIPSE:
  393.                 setCursor(Qt::SizeVerCursor);
  394.                 break;
  395.             default:
  396.                 break;
  397.             }
  398.             break;
  399.         }
  400.         case RECT_TOP_RIGHT: {
  401.             switch (cropperShape) {
  402.             case CropperShape::SQUARE:
  403.             case CropperShape::CIRCLE:
  404.             case CropperShape::RECT:
  405.             case CropperShape::ELLIPSE:
  406.                 setCursor(Qt::SizeBDiagCursor);
  407.                 break;
  408.             default:
  409.                 break;
  410.             }
  411.             break;
  412.         }
  413.         case RECT_INSIDE: {
  414.             setCursor(Qt::SizeAllCursor);
  415.             break;
  416.         }
  417.     }
  418. }
  420. /*****************************************************
  421.  *
  422.  *  Mouse Events
  423.  *
  424. *****************************************************/
  426. void ImageCropperLabel::mousePressEvent(QMouseEvent *e) {
  427.     currPos = lastPos = e->pos();
  428.     isLButtonPressed = true;
  429. }
  431. void ImageCropperLabel::mouseMoveEvent(QMouseEvent *e) {
  432.     currPos = e->pos();
  433.     if (!isCursorPosCalculated) {
  434.         cursorPosInCropperRect = getPosInCropperRect(currPos);
  435.         changeCursor();
  436.     }
  438.     if (!isLButtonPressed)
  439.         return;
  440.     if (!imageRect.contains(currPos))
  441.         return;
  443.     isCursorPosCalculated = true;
  445.     int xOffset = currPos.x() - lastPos.x();
  446.     int yOffset = currPos.y() - lastPos.y();
  447.     lastPos = currPos;
  449.     int disX = 0;
  450.     int disY = 0;
  452.     // Move cropper
  453.     switch (cursorPosInCropperRect) {
  454.         case RECT_OUTSIZD:
  455.             break;
  456.         case RECT_BOTTOM_RIGHT: {
  457.             disX = currPos.x() - cropperRect.left();
  458.             disY = currPos.y() - cropperRect.top();
  459.             switch (cropperShape) {
  460.                 case CropperShape::UNDEFINED:
  461.                 case CropperShape::FIXED_RECT:
  462.                 case CropperShape::FIXED_ELLIPSE:
  463.                     break;
  464.                 case CropperShape::SQUARE:
  465.                 case CropperShape::CIRCLE:
  466.                     setCursor(Qt::SizeFDiagCursor);
  467.                     if (disX >= cropperMinimumWidth && disY >= cropperMinimumHeight) {
  468.                         if (disX > disY && cropperRect.top() + disX <= imageRect.bottom()) {
  469.                             cropperRect.setRight(currPos.x());
  470.                             cropperRect.setBottom(cropperRect.top() + disX);
  471.                             emit croppedImageChanged();
  472.                         }
  473.                         else if (disX <= disY && cropperRect.left() + disY <= imageRect.right()) {
  474.                             cropperRect.setBottom(currPos.y());
  475.                             cropperRect.setRight(cropperRect.left() + disY);
  476.                             emit croppedImageChanged();
  477.                         }
  478.                     }
  479.                     break;
  480.                 case CropperShape::RECT:
  481.                 case CropperShape::ELLIPSE:
  482.                     setCursor(Qt::SizeFDiagCursor);
  483.                     if (disX >= cropperMinimumWidth) {
  484.                         cropperRect.setRight(currPos.x());
  485.                         emit croppedImageChanged();
  486.                     }
  487.                     if (disY >= cropperMinimumHeight) {
  488.                         cropperRect.setBottom(currPos.y());
  489.                         emit croppedImageChanged();
  490.                     }
  491.                     break;
  492.             }
  493.             break;
  494.         }
  495.         case RECT_RIGHT: {
  496.             disX = currPos.x() - cropperRect.left();
  497.             switch (cropperShape) {
  498.                 case CropperShape::UNDEFINED:
  499.                 case CropperShape::FIXED_RECT:
  500.                 case CropperShape::FIXED_ELLIPSE:
  501.                 case CropperShape::SQUARE:
  502.                 case CropperShape::CIRCLE:
  503.                     break;
  504.                 case CropperShape::RECT:
  505.                 case CropperShape::ELLIPSE:
  506.                     if (disX >= cropperMinimumWidth) {
  507.                         cropperRect.setRight(currPos.x());
  508.                         emit croppedImageChanged();
  509.                     }
  510.                     break;
  511.             }
  512.             break;
  513.         }
  514.         case RECT_BOTTOM: {
  515.             disY = currPos.y() - cropperRect.top();
  516.             switch (cropperShape) {
  517.                 case CropperShape::UNDEFINED:
  518.                 case CropperShape::FIXED_RECT:
  519.                 case CropperShape::FIXED_ELLIPSE:
  520.                 case CropperShape::SQUARE:
  521.                 case CropperShape::CIRCLE:
  522.                     break;
  523.                 case CropperShape::RECT:
  524.                 case CropperShape::ELLIPSE:
  525.                     if (disY >= cropperMinimumHeight) {
  526.                         cropperRect.setBottom(cropperRect.bottom() + yOffset);
  527.                         emit croppedImageChanged();
  528.                     }
  529.                     break;
  530.             }
  531.             break;
  532.         }
  533.         case RECT_BOTTOM_LEFT: {
  534.             disX = cropperRect.right() - currPos.x();
  535.             disY = currPos.y() - cropperRect.top();
  536.             switch (cropperShape) {
  537.                 case CropperShape::UNDEFINED:
  538.                     break;
  539.                 case CropperShape::FIXED_RECT:
  540.                 case CropperShape::FIXED_ELLIPSE:
  541.                 case CropperShape::RECT:
  542.                 case CropperShape::ELLIPSE:
  543.                     if (disX >= cropperMinimumWidth) {
  544.                         cropperRect.setLeft(currPos.x());
  545.                         emit croppedImageChanged();
  546.                     }
  547.                     if (disY >= cropperMinimumHeight) {
  548.                         cropperRect.setBottom(currPos.y());
  549.                         emit croppedImageChanged();
  550.                     }
  551.                     break;
  552.                 case CropperShape::SQUARE:
  553.                 case CropperShape::CIRCLE:
  554.                     if (disX >= cropperMinimumWidth && disY >= cropperMinimumHeight) {
  555.                         if (disX > disY && cropperRect.top() + disX <= imageRect.bottom()) {
  556.                             cropperRect.setLeft(currPos.x());
  557.                             cropperRect.setBottom(cropperRect.top() + disX);
  558.                             emit croppedImageChanged();
  559.                         }
  560.                         else if (disX <= disY && cropperRect.right() - disY >= imageRect.left()) {
  561.                             cropperRect.setBottom(currPos.y());
  562.                             cropperRect.setLeft(cropperRect.right() - disY);
  563.                             emit croppedImageChanged();
  564.                         }
  565.                     }
  566.                     break;
  567.             }
  568.             break;
  569.         }
  570.         case RECT_LEFT: {
  571.             disX = cropperRect.right() - currPos.x();
  572.             switch (cropperShape) {
  573.                 case CropperShape::UNDEFINED:
  574.                 case CropperShape::FIXED_RECT:
  575.                 case CropperShape::FIXED_ELLIPSE:
  576.                 case CropperShape::SQUARE:
  577.                 case CropperShape::CIRCLE:
  578.                     break;
  579.                 case CropperShape::RECT:
  580.                 case CropperShape::ELLIPSE:
  581.                     if (disX >= cropperMinimumHeight) {
  582.                         cropperRect.setLeft(cropperRect.left() + xOffset);
  583.                         emit croppedImageChanged();
  584.                     }
  585.                     break;
  586.             }
  587.             break;
  588.         }
  589.         case RECT_TOP_LEFT: {
  590.             disX = cropperRect.right() - currPos.x();
  591.             disY = cropperRect.bottom() - currPos.y();
  592.             switch (cropperShape) {
  593.                 case CropperShape::UNDEFINED:
  594.                 case CropperShape::FIXED_RECT:
  595.                 case CropperShape::FIXED_ELLIPSE:
  596.                     break;
  597.                 case CropperShape::RECT:
  598.                 case CropperShape::ELLIPSE:
  599.                     if (disX >= cropperMinimumWidth) {
  600.                         cropperRect.setLeft(currPos.x());
  601.                         emit croppedImageChanged();
  602.                     }
  603.                     if (disY >= cropperMinimumHeight) {
  604.                         cropperRect.setTop(currPos.y());
  605.                         emit croppedImageChanged();
  606.                     }
  607.                     break;
  608.                 case CropperShape::SQUARE:
  609.                 case CropperShape::CIRCLE:
  610.                     if (disX >= cropperMinimumWidth && disY >= cropperMinimumHeight) {
  611.                         if (disX > disY && cropperRect.bottom() - disX >= imageRect.top()) {
  612.                             cropperRect.setLeft(currPos.x());
  613.                             cropperRect.setTop(cropperRect.bottom() - disX);
  614.                             emit croppedImageChanged();
  615.                         }
  616.                         else if (disX <= disY && cropperRect.right() - disY >= imageRect.left()) {
  617.                             cropperRect.setTop(currPos.y());
  618.                             cropperRect.setLeft(cropperRect.right() - disY);
  619.                             emit croppedImageChanged();
  620.                         }
  621.                     }
  622.                     break;
  623.             }
  624.             break;
  625.         }
  626.         case RECT_TOP: {
  627.             disY = cropperRect.bottom() - currPos.y();
  628.             switch (cropperShape) {
  629.                 case CropperShape::UNDEFINED:
  630.                 case CropperShape::FIXED_RECT:
  631.                 case CropperShape::FIXED_ELLIPSE:
  632.                 case CropperShape::SQUARE:
  633.                 case CropperShape::CIRCLE:
  634.                     break;
  635.                 case CropperShape::RECT:
  636.                 case CropperShape::ELLIPSE:
  637.                     if (disY >= cropperMinimumHeight) {
  638.                         cropperRect.setTop(cropperRect.top() + yOffset);
  639.                         emit croppedImageChanged();
  640.                     }
  641.                     break;
  642.             }
  643.             break;
  644.         }
  645.         case RECT_TOP_RIGHT: {
  646.             disX = currPos.x() - cropperRect.left();
  647.             disY = cropperRect.bottom() - currPos.y();
  648.             switch (cropperShape) {
  649.                 case CropperShape::UNDEFINED:
  650.                 case CropperShape::FIXED_RECT:
  651.                 case CropperShape::FIXED_ELLIPSE:
  652.                     break;
  653.                 case CropperShape::RECT:
  654.                 case CropperShape::ELLIPSE:
  655.                     if (disX >= cropperMinimumWidth) {
  656.                         cropperRect.setRight(currPos.x());
  657.                         emit croppedImageChanged();
  658.                     }
  659.                     if (disY >= cropperMinimumHeight) {
  660.                         cropperRect.setTop(currPos.y());
  661.                         emit croppedImageChanged();
  662.                     }
  663.                     break;
  664.                 case CropperShape::SQUARE:
  665.                 case CropperShape::CIRCLE:
  666.                     if (disX >= cropperMinimumWidth && disY >= cropperMinimumHeight) {
  667.                         if (disX < disY && cropperRect.left() + disY <= imageRect.right()) {
  668.                             cropperRect.setTop(currPos.y());
  669.                             cropperRect.setRight(cropperRect.left() + disY);
  670.                             emit croppedImageChanged();
  671.                         }
  672.                         else if (disX >= disY && cropperRect.bottom() - disX >= imageRect.top()) {
  673.                             cropperRect.setRight(currPos.x());
  674.                             cropperRect.setTop(cropperRect.bottom() - disX);
  675.                             emit croppedImageChanged();
  676.                         }
  677.                     }
  678.                     break;
  679.             }
  680.             break;
  681.         }
  682.         case RECT_INSIDE: {
  683.             // Make sure the cropperRect is entirely inside the imageRecct
  684.             if (xOffset > 0) {
  685.                 if (cropperRect.right() + xOffset > imageRect.right())
  686.                     xOffset = 0;
  687.             }
  688.             else if (xOffset < 0) {
  689.                 if (cropperRect.left() + xOffset < imageRect.left())
  690.                     xOffset = 0;
  691.             }
  692.             if (yOffset > 0) {
  693.                 if (cropperRect.bottom() + yOffset > imageRect.bottom())
  694.                     yOffset = 0;
  695.             }
  696.             else if (yOffset < 0) {
  697.                 if (cropperRect.top() + yOffset < imageRect.top())
  698.                     yOffset = 0;
  699.             }
  700.             cropperRect.moveTo(cropperRect.left() + xOffset, cropperRect.top() + yOffset);
  701.             emit croppedImageChanged();
  702.         }
  703.         break;
  704.     }
  706.     repaint();
  707. }
  709. void ImageCropperLabel::mouseReleaseEvent(QMouseEvent *) {
  710.     isLButtonPressed = false;
  711.     isCursorPosCalculated = false;
  712.     setCursor(Qt::ArrowCursor);
  713. }

下面逐步讲解代码实现

枚举类型定义

  1. enum class CropperShape { … };
  2. enum class OutputShape { … };
  3. enum class SizeType { … };
  • CropperShape：裁剪框的形状（矩形、正方形、椭圆、圆、以及固定尺寸的变种）。
  • OutputShape：导出时输出的形状，仅矩形或椭圆两种。
  • SizeType：内部用来控制当图片过大/过小时如何缩放至 Label 尺寸。

这些枚举让 API 更语义化、调用更直观。

类声明与成员变量

  1. class ImageCropperLabel : public QLabel {
  2.     Q_OBJECT
  3. public:
  4.     ImageCropperLabel(int width, int height, QWidget* parent);
  5.     // … 设置图片、设置裁剪形状、获取结果等方法 …
  7. signals:
  8.     void croppedImageChanged();
  10. protected:
  11.     // 重载绘制与鼠标事件函数
  13. private:
  14.     // 绘制辅助：drawFillRect、drawOpacity、drawRectOpacity 等
  15.     // 工具方法：getPosInCropperRect、resetCropperPos、changeCursor 等
  17.     // 状态变量
  18.     QPixmap originalImage;     // 原始图片
  19.     QPixmap tempImage;         // 缩放至 Label 尺寸后的临时位图
  21.     bool isShowRectBorder = true;  // 是否画裁剪框边框
  22.     QPen borderPen;                // 边框样式
  24.     CropperShape cropperShape = CropperShape::UNDEFINED;
  25.     OutputShape  outputShape  = OutputShape::RECT;
  27.     QRect imageRect;        // 在 Label 中显示图片的区域（可能有留白）
  28.     QRect cropperRect;      // 裁剪框在 Label 坐标系下的位置与大小
  29.     QRect cropperRect_;     // “真实”像素尺寸下的参考矩形（仅固定尺寸时有效）
  30.     double scaledRate = 1.0;
  32.     // 拖拽、缩放交互相关
  33.     bool isLButtonPressed = false;
  34.     bool isCursorPosCalculated = false;
  35.     int  cursorPosInCropperRect = 0;  // 用上述匿名 enum 表示鼠标在裁剪框哪个位置
  36.     QPoint lastPos, currPos;
  38.     // 拖拽控制点样式
  39.     bool isShowDragSquare = true;
  40.     int dragSquareEdge = 8;
  41.     QColor dragSquareColor = Qt::white;
  43.     int cropperMinimumWidth = dragSquareEdge * 2;
  44.     int cropperMinimumHeight = dragSquareEdge * 2;
  46.     // 半透明遮罩
  47.     bool isShowOpacityEffect = false;
  48.     double opacity = 0.6;
  49. };
  • 核心状态：存了原图、临时图、裁剪框位置、缩放比例等。
  • 交互状态：鼠标按下／移动、在哪个拖拽点、是否在拖拽中。
  • 可配置属性：边框、拖拽手柄、最小尺寸、遮罩效果等，通过 public 方法暴露给外部。

构造函数（Label 初始化）

  1. ImageCropperLabel::ImageCropperLabel(int width, int height, QWidget* parent)
  2.     : QLabel(parent)
  3. {
  4.     setFixedSize(width, height);
  5.     setAlignment(Qt::AlignCenter);
  6.     setMouseTracking(true);   // 即使不按按钮也能收到 mouseMove 事件
  8.     borderPen.setWidth(1);
  9.     borderPen.setColor(Qt::white);
  10.     borderPen.setDashPattern(QVector<qreal>() << 3 << 3);  // 虚线
  11. }
  • 固定尺寸：确保裁剪界面大小一致，不随容器拉伸。
  • 居中显示：图片展示时居中。
  • 边框样式：白色虚线。

加载并缩放原图

  1. void ImageCropperLabel::setOriginalImage(const QPixmap &pixmap) {
  2.     originalImage = pixmap;
  4.     // 计算在 label 里显示时的缩放比例和目标尺寸
  5.     if (imgWidth * labelHeight < imgHeight * labelWidth) {
  6.         scaledRate = labelHeight / double(imgHeight);
  7.         … compute imgWidthInLabel, imageRect …
  8.     } else {
  9.         … 另一种缩放方式 …
  10.     }
  12.     tempImage = originalImage.scaled(imgWidthInLabel, imgHeightInLabel,
  13.                                      Qt::KeepAspectRatio, Qt::SmoothTransformation);
  14.     setPixmap(tempImage);
  16.     // 如果是固定尺寸裁剪框，需要按同样比例缩放
  17.     if (cropperShape >= CropperShape::FIXED_RECT) {
  18.         cropperRect.setWidth(int(cropperRect_.width() * scaledRate));
  19.         …
  20.     }
  21.     resetCropperPos();
  22. }
  • 按保持长宽比的方式，把原图缩放到 Label 区域内（letterbox 模式）。
  • imageRect：记录图像在 Label 坐标系下的实际绘制区域。
  • tempImage：在 Label 上展示的图，用于用户交互。

image-20250511114718983

image-20250511115038528

裁剪形状设置与重置

  1. void ImageCropperLabel::setRectCropper()     { cropperShape = RECT; resetCropperPos(); }
  2. … // 各种 setXXXCropper()
  4. void ImageCropperLabel::resetCropperPos() {
  5.     // 根据 cropperShape，计算初始的 cropperRect：
  6.     // - 固定尺寸时居中铺满
  7.     // - 可变尺寸时取图片较短边的 3/4，居中
  8. }
  • 统一调用：每次改变 shape 或大小，都调用 resetCropperPos() 让裁剪框回到可见区域中央。

image-20250511115825046

image-20250511120205707

获取裁剪结果

  1. QPixmap ImageCropperLabel::getCroppedImage(OutputShape shape) {
  2.     // 1. 根据缩放比例，把 cropperRect 从 Label 坐标系映射到原图坐标系：
  3.     int startX = (cropperRect.left() - imageRect.left()) / scaledRate;
  4.     … compute croppedWidth, croppedHeight …
  6.     // 2. 从 originalImage 上 copy 出子图
  7.     QPixmap resultImage = originalImage.copy(startX, startY, cw, ch);
  9.     // 3. 如果输出椭圆，则用 QBitmap+setMask 做裁切
  10.     if (shape == OutputShape::ELLIPSE) {
  11.         QBitmap mask(size);
  12.         QPainter p(&mask);
  13.         p.fillRect(…, Qt::white);
  14.         p.setBrush(Qt::black);
  15.         p.drawRoundRect(0,0,w,h,99,99);
  16.         resultImage.setMask(mask);
  17.     }
  18.     return resultImage;
  19. }

image-20250511120838187

  • 核心思路：先把用户框映射回原图，再按需求做矩形或椭圆裁剪。

为什么要除以 scaledRate？

  1. 背景：裁剪区域的坐标 (cropperRect) 和尺寸 (cropperRect.width(), cropperRect.height()) 都是相对于图像在显示中的位置和大小，而不是原始图像的大小。这意味着显示上的裁剪框可能已经被缩放过。因此，scaledRate 是一个缩放比例，用来将裁剪区域从显示坐标系统（可能已经缩放）转换回原始图像的坐标系统。

  2. 代码解释：

    • cropperRect.left() - imageRect.left() 表示裁剪框左边缘与原始图像左边缘的偏移量（即裁剪框相对于图像的起始位置）。
    • scaledRate 是图像在显示时的缩放比例（例如，显示的图像比原图小或大，scaledRate 可以是 1、0.5、2 等）。
    • 除以 scaledRate 就是将显示的坐标转换为原始图像的坐标。这样得到的是裁剪框在原始图像中的位置和大小。

    例如：假设 scaledRate = 0.5（显示图像是原图的 50%），则 cropperRect 表示的区域实际在原图中要乘以 2 才能得到正确的大小和位置。

为什么椭圆要单独处理？

裁剪区域的形状是矩形的，而图像本身可能要根据需求切割成不同的形状。如果要求裁剪区域是椭圆形状，那么矩形的裁剪区域必须通过遮罩（mask）来实现。

  1. 遮罩的作用：
    • 默认情况下，裁剪区域是矩形的。为了让裁剪后的图像呈现椭圆形状，我们需要用一个遮罩来过滤掉矩形区域之外的部分。
    • 通过绘制一个椭圆（在矩形区域内），并设置遮罩（mask），使得图像在该遮罩的范围内显示，超出范围的部分将变为透明。
  2. 椭圆处理的步骤：
    • 通过 QBitmap mask(size) 创建一个与裁剪区域大小相同的二值遮罩（黑白图像）。
    • 然后使用 QPainter 绘制一个椭圆形状。 drawRoundRect 方法画的其实是一个圆角矩形，但由于宽度和高度一样，且角的弯曲度非常高（99, 99），所以它的效果看起来是一个椭圆。
    • 最后，通过 resultImage.setMask(mask) 将这个椭圆形状应用到裁剪后的图像上，从而实现椭圆形的裁剪效果。

painter.setBrush(QColor(0, 0, 0)); 在这里的唯一目的是往那个 QBitmap 遮罩（mask） 上「画」一个黑色的圆角矩形，用来告诉 Qt 哪一块区域要保留、哪一块区域要透明——它并不是在往你的 resultImage 上画黑色。

  • 在 mask 上：
    • 黑色 → 可见
    • 白色 → 透明

如果你不 setBrush(QColor(0, 0, 0)) 去把圆角矩形「涂黑」，那么整张 mask 就只有白色（或只有透明），结果就是 整张图片都被裁成透明了，你看不见任何内容。

所以，setBrush(QColor(0, 0, 0)) 的作用只是：

  1. 在 mask 上，填充一个黑色的圆角矩形；
  2. 当你调用 resultImage.setMask(mask); 时，Qt 会把这部分“黑色”区域映射为 保留原图像素，而把剩下的（白色）区域变成透明。

image-20250511121434047

绘制与遮罩效果

  1. void ImageCropperLabel::paintEvent(QPaintEvent *event) {
  2.     // 1. 先调用父类，实现原始图像的绘制
  3.     QLabel::paintEvent(event);
  5.     // 2. 根据当前裁剪形状，绘制不同的“半透明遮罩”或“高光边”
  6.     switch (cropperShape) {
  7.         case CropperShape::UNDEFINED:
  8.             break;
  9.         case CropperShape::FIXED_RECT:
  10.             drawRectOpacity();
  11.             break;
  12.         case CropperShape::FIXED_ELLIPSE:
  13.             drawEllipseOpacity();
  14.             break;
  15.         case CropperShape::RECT:
  16.             drawRectOpacity();
  17.             drawSquareEdge(!ONLY_FOUR_CORNERS);
  18.             break;
  19.         case CropperShape::SQUARE:
  20.             drawRectOpacity();
  21.             drawSquareEdge(ONLY_FOUR_CORNERS);
  22.             break;
  23.         case CropperShape::ELLIPSE:
  24.             drawEllipseOpacity();
  25.             drawSquareEdge(!ONLY_FOUR_CORNERS);
  26.             break;
  27.         case CropperShape::CIRCLE:
  28.             drawEllipseOpacity();
  29.             drawSquareEdge(ONLY_FOUR_CORNERS);
  30.             break;
  31.     }
  33.     // 3. 如果需要，给裁剪框本身画一条边框
  34.     if (isShowRectBorder) {
  35.         QPainter painter(this);
  36.         painter.setPen(borderPen);
  37.         painter.drawRect(cropperRect);
  38.     }
  39. }

  • 绘制原图
    QLabel::paintEvent(event) 会根据当前设置的 pixmap 或者绘图内容，把“完整的”图像画到控件上。我们不做任何改动，保留原始像素。

    叠加遮罩或高光边
    根据 cropperShape（枚举当前选中的裁剪形状），有两类主要操作：

    • drawRectOpacity() / drawEllipseOpacity()：在裁剪框以外的区域绘制半透明黑色遮罩，突出裁剪区域本身。
    • drawSquareEdge(...)：在裁剪框的四条边或者四个角上绘制高对比度的“小方块”或“手柄”，以便用户拖动调整大小。

    绘制裁剪框边线
    如果 isShowRectBorder==true，再用 borderPen（一般是明亮的颜色或宽度可见的线条）精确地把 cropperRect 描边一次，让裁剪范围更清晰。

半透明遮罩 

  1. void ImageCropperLabel::drawOpacity(const QPainterPath& path) {
  2.     QPainter painterOpac(this);
  3.     painterOpac.setOpacity(opacity);            // 设定当前 painter 的透明度
  4.     painterOpac.fillPath(path, QBrush(Qt::black)); // 用黑色填充整个 path 区域
  5. }
  • opacity：这是一个 [0.0 … 1.0] 之间的浮点值，控制遮罩的“浓度”。越接近 1.0，黑得越不透明；越接近 0.0，则越接近“无色”。
  • fillPath(path, QBrush(Qt::black))：把传入的 QPainterPath 区域，用半透明的黑色一次性“盖”上去。

drawRectOpacity()

  1. void ImageCropperLabel::drawRectOpacity() {
  2.     if (!isShowOpacityEffect) return;
  4.     // 1. p1：整个图像区域
  5.     QPainterPath p1;
  6.     p1.addRect(imageRect);
  8.     // 2. p2：裁剪框区域
  9.     QPainterPath p2;
  10.     p2.addRect(cropperRect);
  12.     // 3. 求差集：p = p1 - p2
  13.     QPainterPath p = p1.subtracted(p2);
  15.     // 4. 对 p 区域绘制半透明黑色遮罩
  16.     drawOpacity(p);
  17. }
  • imageRect：通常是整个图片在控件上的显示区域。
  • cropperRect：用户定义的“裁剪框”矩形。
  • p1.subtracted(p2)：把裁剪框内部切掉，结果 p 就是“图片区域减去裁剪框”的外部部分。
  • 遮罩效果：只有外部部分被半透明黑色盖住，裁剪框内——也就是用户关心的区域——保持原样未被遮盖。

椭圆遮罩 —— drawEllipseOpacity()（原理同上）

虽然你没贴出函数体，但它与 drawRectOpacity() 唯一区别就是把 p2.addRect(cropperRect) 换成：

  1. QPainterPath p2;
  2. p2.addEllipse(cropperRect);

这样 p1.subtracted(p2) 就是“整张图片减去椭圆区域”，半透明遮罩会围着椭圆“环绕”绘制。

image-20250511122719029

“方块手柄”高光 —— drawSquareEdge(bool onlyCorners)

  1. void ImageCropperLabel::drawSquareEdge(bool onlyFourCorners) {
  2.     if (!isShowDragSquare)
  3.         return;
  5.     // Four corners
  6.     drawFillRect(cropperRect.topLeft(), dragSquareEdge, dragSquareColor);
  7.     drawFillRect(cropperRect.topRight(), dragSquareEdge, dragSquareColor);
  8.     drawFillRect(cropperRect.bottomLeft(), dragSquareEdge, dragSquareColor);
  9.     drawFillRect(cropperRect.bottomRight(), dragSquareEdge, dragSquareColor);
  11.     // Four edges
  12.     if (!onlyFourCorners) {
  13.         int centralX = cropperRect.left() + cropperRect.width() / 2;
  14.         int centralY = cropperRect.top() + cropperRect.height() / 2;
  15.         drawFillRect(QPoint(cropperRect.left(), centralY), dragSquareEdge, dragSquareColor);
  16.         drawFillRect(QPoint(centralX, cropperRect.top()), dragSquareEdge, dragSquareColor);
  17.         drawFillRect(QPoint(cropperRect.right(), centralY), dragSquareEdge, dragSquareColor);
  18.         drawFillRect(QPoint(centralX, cropperRect.bottom()), dragSquareEdge, dragSquareColor);
  19.     }
  20. }

image-20250511123344886

此函数通常会：

  1. 在 cropperRect 的四条边（或四个角）各计算几个固定大小的小矩形位置。
  2. 用不透明画刷（如白色或蓝色）绘制这些 “拖拽手柄”，让用户知道可以从这些点出发拖动调整大小。

onlyCorners 参数决定是只在四个角显示手柄，还是在四条边中央也显示。

手柄检测

isPosNearDragSquare(pt1, pt2)：手柄附近检测

  1. bool ImageCropperLabel::isPosNearDragSquare(const QPoint& pt1, const QPoint& pt2) {
  2.     return abs(pt1.x() - pt2.x()) * 2 <= dragSquareEdge
  3.         && abs(pt1.y() - pt2.y()) * 2 <= dragSquareEdge;
  4. }
  • pt1：当前鼠标点（或触点）坐标。
  • pt2：某个拖拽手柄中心点坐标。
  • dragSquareEdge：定义手柄大小（宽或高）的常量。

逻辑：如果鼠标点到手柄中心的水平距离和垂直距离都不超过 dragSquareEdge/2，就认为“在手柄区域内”。乘以 2 只是把“不超过半边”转成”两倍距离不超过边长“的判断。

getPosInCropperRect(pt)：整体位置分类

  1. int ImageCropperLabel::getPosInCropperRect(const QPoint &pt) {
  2.     if (isPosNearDragSquare(pt, QPoint(cropperRect.right(), cropperRect.center().y())))
  3.         return RECT_RIGHT;
  4.     if (isPosNearDragSquare(pt, cropperRect.bottomRight()))
  5.         return RECT_BOTTOM_RIGHT;
  6.     if (isPosNearDragSquare(pt, QPoint(cropperRect.center().x(), cropperRect.bottom())))
  7.         return RECT_BOTTOM;
  8.     if (isPosNearDragSquare(pt, cropperRect.bottomLeft()))
  9.         return RECT_BOTTOM_LEFT;
  10.     if (isPosNearDragSquare(pt, QPoint(cropperRect.left(), cropperRect.center().y())))
  11.         return RECT_LEFT;
  12.     if (isPosNearDragSquare(pt, cropperRect.topLeft()))
  13.         return RECT_TOP_LEFT;
  14.     if (isPosNearDragSquare(pt, QPoint(cropperRect.center().x(), cropperRect.top())))
  15.         return RECT_TOP;
  16.     if (isPosNearDragSquare(pt, cropperRect.topRight()))
  17.         return RECT_TOP_RIGHT;
  19.     if (cropperRect.contains(pt, true))
  20.         return RECT_INSIDE;
  22.     return RECT_OUTSIZD;
  23. }

按照顺序，它分别检测：

  1. 右边中点 RECT_RIGHT
    以 (cropperRect.right(), cropperRect.center().y()) 为中心，看鼠标是否落在右侧手柄区域。
  2. 右下角 RECT_BOTTOM_RIGHT
    以 cropperRect.bottomRight() 为中心，看鼠标是否落在这个角的手柄。
  3. 下边中点 RECT_BOTTOM
    中点为 (center.x(), bottom)。
  4. 左下角 RECT_BOTTOM_LEFT
  5. 左边中点 RECT_LEFT
  6. 左上角 RECT_TOP_LEFT
  7. 上边中点 RECT_TOP
  8. 右上角 RECT_TOP_RIGHT

如果以上八个拖拽手柄区域都没有命中，接着：

  • RECT_INSIDE：如果点严格落在 cropperRect 内部（第二个参数 true 表示内边缘也算），就返回“内部”标志。
  • RECT_OUTSIZD：都不符合，则认为在裁剪框外。

综合效果

  • 在 鼠标按下 或 移动 时，调用 getPosInCropperRect(pt)，能够快速定位出当前点相对于裁剪框的位置类型。
  • 上层逻辑（如鼠标事件处理）根据这个返回值，决定要进行哪种操作：
    • 如果是某个角或边的手柄，就进入“调整大小”模式，且拖拽方向锁定；
    • 如果是 RECT_INSIDE，则进入“移动整个裁剪框”模式；
    • 如果是 RECT_OUTSIZD，则不做任何裁剪框相关的拖拽操作。

这样，就实现了一个用户友好的「拖拽四角/边来调整裁剪框大小，或者拖拽内部来移动框」的交互体验。

鼠标按下移动释放

mousePressEvent

  1. void ImageCropperLabel::mousePressEvent(QMouseEvent *e) {
  2.     currPos = lastPos = e->pos();
  3.     isLButtonPressed = true;
  4. }

功能：当鼠标左键按下时调用。

做了什么：

  1. 用 e->pos()（相对于控件左上角的坐标）初始化 currPos、lastPos，为后续移动计算做准备。
  2. 将 isLButtonPressed 置为 true，开启拖动或缩放模式。

mouseMoveEvent

这是核心函数，处理移动和缩放。

  1. void ImageCropperLabel::mouseMoveEvent(QMouseEvent *e) {
  2.     currPos = e->pos();
  3.     // 首次进入时，确定鼠标在哪个区域：边角、边缘、框内或框外
  4.     if (!isCursorPosCalculated) {
  5.         cursorPosInCropperRect = getPosInCropperRect(currPos);
  6.         changeCursor();  // 根据区域切换不同形状的鼠标指针
  7.     }
  9.     // 如果左键没有按下或鼠标移出了图片范围，就不做任何处理
  10.     if (!isLButtonPressed || !imageRect.contains(currPos))
  11.         return;
  13.     isCursorPosCalculated = true;  // 保证只计算一次区域
  14.     // 计算本次移动增量
  15.     int xOffset = currPos.x() - lastPos.x();
  16.     int yOffset = currPos.y() - lastPos.y();
  17.     lastPos = currPos;
  19.     int disX = 0, disY = 0;  // 用于后续缩放计算
  21.     // 根据鼠标所在区域，选择对应的移动/缩放逻辑
  22.     switch (cursorPosInCropperRect) {
  23.         case RECT_OUTSIZD:
  24.             break;  // 在框外：不处理
  26.         // —— 右下角 缩放 ——
  27.         case RECT_BOTTOM_RIGHT: {
  28.             disX = currPos.x() - cropperRect.left();
  29.             disY = currPos.y() - cropperRect.top();
  30.             switch (cropperShape) {
  31.                 // 固定模式：不允许缩放
  32.                 case CropperShape::UNDEFINED:
  33.                 case CropperShape::FIXED_RECT:
  34.                 case CropperShape::FIXED_ELLIPSE:
  35.                     break;
  36.                 // 正方形／圆形：强制保持宽高一致
  37.                 case CropperShape::SQUARE:
  38.                 case CropperShape::CIRCLE:
  39.                     setCursor(Qt::SizeFDiagCursor);
  40.                     // 保证没有小于最小尺寸且不超出图片下/right 边
  41.                     if (disX >= cropperMinimumWidth && disY >= cropperMinimumHeight) {
  42.                         if (disX > disY && cropperRect.top() + disX <= imageRect.bottom()) {
  43.                             // 宽度主导，伸长底边
  44.                             cropperRect.setRight(currPos.x());
  45.                             cropperRect.setBottom(cropperRect.top() + disX);
  46.                         }
  47.                         else if (disY >= disX && cropperRect.left() + disY <= imageRect.right()) {
  48.                             // 高度主导，伸长右边
  49.                             cropperRect.setBottom(currPos.y());
  50.                             cropperRect.setRight(cropperRect.left() + disY);
  51.                         }
  52.                         emit croppedImageChanged();
  53.                     }
  54.                     break;
  55.                 // 普通矩形／椭圆：独立伸缩宽或高
  56.                 case CropperShape::RECT:
  57.                 case CropperShape::ELLIPSE:
  58.                     setCursor(Qt::SizeFDiagCursor);
  59.                     if (disX >= cropperMinimumWidth) {
  60.                         cropperRect.setRight(currPos.x());
  61.                         emit croppedImageChanged();
  62.                     }
  63.                     if (disY >= cropperMinimumHeight) {
  64.                         cropperRect.setBottom(currPos.y());
  65.                         emit croppedImageChanged();
  66.                     }
  67.                     break;
  68.             }
  69.             break;
  70.         }
  72.         // —— 右侧边 缩放 ——
  73.         case RECT_RIGHT: {
  74.             disX = currPos.x() - cropperRect.left();
  75.             if (cropperShape==CropperShape::RECT||cropperShape==CropperShape::ELLIPSE) {
  76.                 if (disX >= cropperMinimumWidth) {
  77.                     cropperRect.setRight(currPos.x());
  78.                     emit croppedImageChanged();
  79.                 }
  80.             }
  81.             break;
  82.         }
  84.         // —— 底部边 缩放 ——
  85.         case RECT_BOTTOM: {
  86.             disY = currPos.y() - cropperRect.top();
  87.             if (cropperShape==CropperShape::RECT||cropperShape==CropperShape::ELLIPSE) {
  88.                 if (disY >= cropperMinimumHeight) {
  89.                     cropperRect.setBottom(cropperRect.bottom() + yOffset);
  90.                     emit croppedImageChanged();
  91.                 }
  92.             }
  93.             break;
  94.         }
  96.         // —— 左下角、左侧、上边…… 各角/边 缩放逻辑同上 —— 
  97.         // （代码中分别处理了 RECT_BOTTOM_LEFT、RECT_LEFT、RECT_TOP_LEFT、
  98.         //  RECT_TOP、RECT_TOP_RIGHT，核心思想与右下相似：计算 disX/disY，
  99.         //  判断形状、最小尺寸、边界，再更新对应边或角的坐标并 emit。）
  101.         // —— 框内拖动 —— 
  102.         case RECT_INSIDE: {
  103.             // 先检测移动后是否会超出图片范围，将偏移量 xOffset/yOffset 裁剪到合法区间
  104.             if (cropperRect.left() + xOffset < imageRect.left())    xOffset = imageRect.left() - cropperRect.left();
  105.             if (cropperRect.right()+ xOffset > imageRect.right())   xOffset = imageRect.right() - cropperRect.right();
  106.             if (cropperRect.top()  + yOffset < imageRect.top())     yOffset = imageRect.top() - cropperRect.top();
  107.             if (cropperRect.bottom()+ yOffset > imageRect.bottom())  yOffset = imageRect.bottom() - cropperRect.bottom();
  108.             // 移动整个裁剪框
  109.             cropperRect.translate(xOffset, yOffset);
  110.             emit croppedImageChanged();
  111.             break;
  112.         }
  113.     }
  115.     repaint();  // 触发重绘，及时在界面上更新新的裁剪框
  116. }

关键点总结

  1. 首次定位
    当鼠标首次进入 mouseMoveEvent，用 getPosInCropperRect(currPos) 判断鼠标在裁剪框的哪个“热区”——外部、框内、四边、四角中的哪一个，并调用 changeCursor() 切换对应的鼠标指针样式（如移动箭头、水平/垂直/对角调整形状等），以提示用户下一步操作。

  2. 左右、上下、四角缩放

    • 对于矩形/椭圆，宽高可独立调整；
    • 对于正方形/圆，则保证 width == height，并根据位移量较大的一边来驱动另一边；
    • 对于“固定”模式，则完全不允许用户改变大小。

  3. 边界与最小尺寸约束

    • 缩放时先判断新的宽度/高度是否 ≥ cropperMinimumWidth/Height；
    • 再判断新坐标是否会跑出 imageRect（图片区域）之外；
    • 最后才更新 cropperRect 并发信号 croppedImageChanged() 以便上层 UI 或逻辑更新裁剪后的图像。

  4. 拖动整个裁剪框

    • 鼠标在框内部拖动（RECT_INSIDE），计算每次的偏移 xOffset,yOffset，
    • 并先“裁剪”偏移量，使整个框保持在图片范围内，
    • 最后调用 translate() 平移 cropperRect。

mouseReleaseEvent(QMouseEvent *)

  1. void ImageCropperLabel::mouseReleaseEvent(QMouseEvent *) {
  2.     isLButtonPressed = false;
  3.     isCursorPosCalculated = false;
  4.     setCursor(Qt::ArrowCursor);
  5. }
  • 功能：当鼠标左键松开时调用。
  • 做了什么：
    1. 将 isLButtonPressed 置为 false，停止后续的拖动/缩放处理。
    2. 重置 isCursorPosCalculated = false，下次再移动时会重新计算在哪个区域。
    3. 恢复默认箭头指针。

保存逻辑

  1. //上传头像
  2. void UserInfoPage::on_up_btn_clicked()
  3. {
  4.     // 1. 让对话框也能选 *.webp
  5.     QString filename = QFileDialog::getOpenFileName(
  6.         this,
  7.         tr("选择图片"),
  8.         QString(),
  9.         tr("图片文件 (*.png *.jpg *.jpeg *.bmp *.webp)")
  10.     );
  11.     if (filename.isEmpty())
  12.         return;
  14.     // 2. 直接用 QPixmap::load() 加载，无需手动区分格式
  15.     QPixmap inputImage;
  16.     if (!inputImage.load(filename)) {
  17.         QMessageBox::critical(
  18.             this,
  19.             tr("错误"),
  20.             tr("加载图片失败！请确认已部署 WebP 插件。"),
  21.             QMessageBox::Ok
  22.         );
  23.         return;
  24.     }
  26.     QPixmap image = ImageCropperDialog::getCroppedImage(filename, 600, 400, CropperShape::CIRCLE);
  27.     if (image.isNull())
  28.         return;
  30.     QPixmap scaledPixmap = image.scaled( ui->head_lb->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation); // 将图片缩放到label的大小
  31.     ui->head_lb->setPixmap(scaledPixmap); // 将缩放后的图片设置到QLabel上
  32.     ui->head_lb->setScaledContents(true); // 设置QLabel自动缩放图片内容以适应大小
  34.     QString storageDir = QStandardPaths::writableLocation(
  35.                              QStandardPaths::AppDataLocation);
  36.     // 2. 在其下再建一个 avatars 子目录
  37.     QDir dir(storageDir);
  38.     if (!dir.exists("avatars")) {
  39.         if (!dir.mkpath("avatars")) {
  40.             qWarning() << "无法创建 avatars 目录：" << dir.filePath("avatars");
  41.             QMessageBox::warning(
  42.                 this,
  43.                 tr("错误"),
  44.                 tr("无法创建存储目录，请检查权限或磁盘空间。")
  45.             );
  46.             return;
  47.         }
  48.     }
  49.     // 3. 拼接最终的文件名 head.png
  50.     QString filePath = dir.filePath("avatars/head.png");
  52.     // 4. 保存 scaledPixmap 为 PNG（无损、最高质量）
  53.     if (!scaledPixmap.save(filePath, "PNG")) {
  54.         QMessageBox::warning(
  55.             this,
  56.             tr("保存失败"),
  57.             tr("头像保存失败，请检查权限或磁盘空间。")
  58.         );
  59.     } else {
  60.         qDebug() << "头像已保存到：" << filePath;
  61.         // 以后读取直接用同一路径：storageDir/avatars/head.png
  62.     }
  63. }
  1. 选择图片文件（支持多种格式）
  1. QString filename = QFileDialog::getOpenFileName(
  2.     this,
  3.     tr("选择图片"),
  4.     QString(),
  5.     tr("图片文件 (*.png *.jpg *.jpeg *.bmp *.webp)")
  6. );
  7. if (filename.isEmpty())
  8.     return;
  • 功能：当用户点击上传头像按钮时，弹出文件选择对话框（QFileDialog），允许用户选择图片文件。此对话框支持的文件格式包括 .png、.jpg、.jpeg、.bmp 和 .webp。如果用户没有选择文件（即点击了取消），则返回并不执行后续操作。
  1. 加载图片文件
  1. QPixmap inputImage;
  2. if (!inputImage.load(filename)) {
  3.     QMessageBox::critical(
  4.         this,
  5.         tr("错误"),
  6.         tr("加载图片失败！请确认已部署 WebP 插件。"),
  7.         QMessageBox::Ok
  8.     );
  9.     return;
  10. }
  • 功能：通过 QPixmap 类加载用户选定的图片文件。如果加载失败（如文件损坏、格式不支持等），则弹出错误对话框提示用户，并退出当前函数。
  1. 裁剪图片
  1. QPixmap image = ImageCropperDialog::getCroppedImage(filename, 600, 400, CropperShape::CIRCLE);
  2. if (image.isNull())
  3.     return;
  • 功能：调用 ImageCropperDialog::getCroppedImage 函数裁剪图片。这个函数会根据传入的文件路径（filename）、目标大小（600x400）和裁剪形状（此处是圆形 CropperShape::CIRCLE）返回一个裁剪后的图片 QPixmap。如果裁剪过程失败（即返回空 QPixmap），则函数直接退出。
  1. 缩放图片到指定的 QLabel 大小
  1. QPixmap scaledPixmap = image.scaled( ui->head_lb->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
  2. ui->head_lb->setPixmap(scaledPixmap);
  3. ui->head_lb->setScaledContents(true);
  • 功能：将裁剪后的图片缩放到与界面上显示头像的 QLabel（head_lb）大小相匹配。使用 scaled() 方法，保持图片的宽高比 (Qt::KeepAspectRatio)，并且应用平滑的图像转换（Qt::SmoothTransformation），保证缩放后的图片质量尽可能高。最后，将缩放后的图片设置到 QLabel 上，并开启 setScaledContents(true)，使得 QLabel 自动调整内容大小以适应其尺寸。
  1. 获取应用程序的存储目录
  1. QString storageDir = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation);
  • 功能：通过 QStandardPaths::writableLocation(QStandardPaths::AppDataLocation) 获取应用程序的可写数据存储目录。这个目录是操作系统为应用程序提供的一个常规存储路径，通常用于存储配置文件、数据文件等。
  1. 创建头像存储目录
  1. QDir dir(storageDir);
  2. if (!dir.exists("avatars")) {
  3.     if (!dir.mkpath("avatars")) {
  4.         qWarning() << "无法创建 avatars 目录：" << dir.filePath("avatars");
  5.         QMessageBox::warning(
  6.             this,
  7.             tr("错误"),
  8.             tr("无法创建存储目录，请检查权限或磁盘空间。")
  9.         );
  10.         return;
  11.     }
  12. }
  • 功能：检查存储目录下是否已经存在一个名为 avatars 的子目录。如果不存在，则通过 mkpath() 创建该子目录。若创建失败，弹出警告对话框提示用户检查权限或磁盘空间。
  1. 拼接最终的保存路径
  1. QString filePath = dir.filePath("avatars/head.png");
  • 功能：拼接最终的文件路径，存储头像的文件名为 head.png，并位于 avatars 目录下。filePath 即为头像图片的完整存储路径。
  1. 保存裁剪后的图片
  1. if (!scaledPixmap.save(filePath, "PNG")) {
  2.     QMessageBox::warning(
  3.         this,
  4.         tr("保存失败"),
  5.         tr("头像保存失败，请检查权限或磁盘空间。")
  6.     );
  7. } else {
  8.     qDebug() << "头像已保存到：" << filePath;
  9. }
  • 功能：使用 QPixmap::save() 方法将裁剪并缩放后的图片保存到指定路径 filePath。保存格式为 PNG。如果保存失败，则弹出警告对话框提示用户；否则，输出日志，显示头像已成功保存的路径。

源码连接

https://gitee.com/secondtonone1/llfcchat

热门评论
点击查看更多评论 没有更多评论了,点击收起 展开评论

热门文章

  1. vscode搭建windows C++开发环境
    喜欢(596) 浏览(95145)

  2. 使用hexo搭建个人博客
    喜欢(533) 浏览(13515)

  3. Linux环境搭建和编码
    喜欢(594) 浏览(15188)

  4. MarkDown在线编辑器
    喜欢(514) 浏览(15315)

  5. 聊天项目(28) 分布式服务通知好友申请
    喜欢(507) 浏览(6870)

最新评论

  1. 聊天项目(9) redis服务搭建 pro_lin:redis线程池的析构函数，除了pop出队列，还要free掉redis连接把
  2. slice介绍和使用 恋恋风辰:切片作为引用类型极大的提高了数据传递的效率和性能，但也要注意切片的浅拷贝隐患，算是一把双刃剑，这世间的常态就是在两极之间寻求一种稳定。
  3. 创建项目和编译 secondtonone1:谢谢支持
  4. Qt 对话框 Spade2077:QDialog w(); //这里是不是不需要带括号
  5. 面试题汇总(一) secondtonone1:看到网络上经常提问的go的问题，做了一下汇总，结合自己的经验给出的答案，如有纰漏，望指正批评。
  6. 解决博客回复区被脚本注入的问题 secondtonone1:走到现在我忽然明白一个道理，无论工作也好生活也罢，最重要的是开心，即使一份安稳的工作不能给我带来事业上的积累也要合理的舍弃，所以我还是想去做喜欢的方向。
  7. 答疑汇总(thread,async源码分析) Yagus:如果引用计数为0，则会执行 future 的析构进而等待任务执行完成，那么看到的输出将是 这边应该不对吧，std::future析构只在这三种情况都满足的时候才回block: 1.共享状态是std::async 创造的(类型是_Task_async_state) 2.共享状态没有ready 3.这个future是共享状态的最后一个引用 这边共享状态类型是“_Package_state”，引用计数即使为0也不应该block啊
  8. 利用栅栏实现同步 Dzher:作者你好！我觉得 std::thread a(write_x); std::thread b(write_y); std::thread c(read_x_then_y); std::thread d(read_y_then_x); 这个例子中的assert fail并不会发生，原子变量设定了非relaxed内存序后一个线程的原子变量被写入，那么之后的读取一定会被同步的，c和d线程中只可能同时发生一个z++未执行的情况，最终z不是1就是2了，我测试了很多次都没有assert，请问我这个观点有什么错误，谢谢！
  9. interface应用 secondtonone1:interface是万能类型，但是使用时要转换为实际类型来使用。interface丰富了go的多态特性，也降低了传统面向对象语言的耦合性。
  10. 聊天项目(7) visualstudio配置grpc diablorrr:cmake文件得改一下 find_package(Boost REQUIRED COMPONENTS system filesystem)，要加上filesystem。在target_link_libraries中也同样加上
  11. 聊天项目(15) 客户端实现TCP管理者 lkx:已经在&QTcpSocket::readyRead 回调函数中做了处理了的。
  12. 类和对象 陈宇航:支持！！！！
  13. 基于锁实现线程安全队列和栈容器 secondtonone1:我是博主，你认真学习的样子的很可爱，哈哈，我画的是链表由空变成1个的情况。其余情况和你思考的类似，只不过我用了一个无效节点表示tail的指向，最初head和tail指向的都是这个节点。
  14. string类 WangQi888888:确实错了，应该是！isspace(sind[index]). 否则不进入循环，还是原来的字符串“some string”
  15. 堆排序 secondtonone1:堆排序非常实用，定时器就是这个原理制作的。
  16. C++ 线程安全的单例模式演变 183******95:单例模式的析构函数何时运行呢? 实际测试里：无论单例模式的析构函数为私有或公有，使用智能指针和辅助回收类，两种方法都无法在main()结束前调用单例的析构函数。
  17. Qt MVC结构之QItemDelegate介绍 胡歌-此生不换:gpt, google
  18. protobuf配置和使用 熊二:你可以把dll放到系统目录，也可以配置环境变量，还能把dll丢到lib里
  19. boost::asio之socket的创建和连接 项空月:发现一些错别字 :每隔vector存储  是不是是每个. asio::mutable_buffers_1 o或者    是不是多打了个o
  20. 聊天项目(13) 重置密码功能 Doraemon:万一一个用户多个邮箱呢 有可能的
  21. 处理网络粘包问题 zyouth: //消息的长度小于头部规定的长度，说明数据未收全，则先将部分消息放到接收节点里 if (bytes_transferred < data_len) { memcpy(_recv_msg_node->_data + _recv_msg_node->_cur_len, _data + copy_len, bytes_transferred); _recv_msg_node->_cur_len += bytes_transferred; ::memset(_data, 0, MAX_LENGTH); _socket.async_read_some(boost::asio::buffer(_data, MAX_LENGTH), std::bind(&CSession::HandleRead, this, std::placeholders::_1, std::placeholders::_2, shared_self)); //头部处理完成 _b_head_parse = true; return; } 把_b_head_parse = true;放在_socket.async_read_some前面是不是更好
  22. 网络编程学习方法和图书推荐 Corleone:啥程度可以找工作
  23. C++ 并发三剑客future, promise和async Yunfei:大佬您好，如果这个线程池中加入的异步任务的形参如果有右值引用，这个commit中的返回类型推导和bind绑定就会出现问题，请问实际工程中，是不是不会用到这种任务，如果用到了，应该怎么解决？
  24. 可变参数模板+异步队列实现异步打印功能 熊二:学到了%%%
  25. visual studio配置boost库 一giao里我离giaogiao:请问是修改成这样吗：.\b2.exe toolset=MinGW
  26. 利用C11模拟伪闭包实现连接的安全回收 搁浅:看chatgpt说 直接传递 shared_from_this() 更安全 提问： socket_.async_read_some(boost::asio::buffer(data_, BUFFSIZE), // 接收客户端发生来的数据 std::bind(&Session::handle_read, this, std::placeholders::_1, std::placeholders::_2, shared_from_this())); socket_.async_read_some(boost::asio::buffer(data_, BUFFSIZE), std::bind(&Session::handle_read, shared_from_this(), std::placeholders::_1, std::placeholders::_2)); 这两种方式有区别吗？ 回答 ： 第一种方式：this 是裸指针，可能会导致生命周期问题，虽然 shared_from_this() 提供了一定的保护，但 this 依然存在风险。 第二种方式：完全使用 shared_ptr 来管理生命周期，更加安全。 通常，第二种方式更推荐使用，因为它可以确保在异步操作完成之前，Session 对象的生命周期得到完全管理，避免使用裸指针的潜在风险。
  27. 构造函数 secondtonone1:构造函数是类的基础知识，要着重掌握
  28. 无锁并发队列 TenThousandOne:_head  和 _tail  替换为原子变量。那里pop的逻辑，val = _data[h] 可以移到循环外面吗
  29. 再谈单例模式 secondtonone1:是的，C++11以后返回局部static变量对象能保证线程安全了。

其他链接

  1. GitHub
  2. 个人博客
  3. 博客园
  4. CSDN

个人公众号

个人微信