QML使用Image加载图片,在图片上做标记并保存标记

**QML 使用 Image 加载图片，进行标记并保存**

在 QML 中，我们可以使用 `Image` 元素来加载图片，并对其进行标记。下面我们将一步步地讲解如何实现这一功能。

### 一、创建一个新项目首先，我们需要创建一个新的 QML项目。在 Qt Creator 中，选择 "File" -> "New File or Project..."，然后选择 "Qt Quick Application"，并命名为 "ImageEditor"。

### 二、加载图片在 `main.qml` 文件中，我们可以使用 `Image` 元素来加载图片。例如：

qmlimport QtQuick2.12import QtQuick.Window2.12Window {
 visible: true width:800 height:600 Image {
 id: image source: "image.jpg"
 anchors.centerIn: parent }
}

qmlimport QtQuick2.12import QtQuick.Window2.12Window {
 visible: true width:800 height:600 Image {
 id: image source: "image.jpg"
 anchors.centerIn: parent }

 MouseArea {
 id: mouseArea anchors.fill: parent hoverEnabled: true onPositionChanged: {
 var x = mouseArea.mouseX;
 var y = mouseArea.mouseY;

 // 在图片上绘制一个标记 image.drawPoint(x, y);
 }
 }
}

qmlimport QtQuick2.12import QtQuick.Window2.12Window {
 visible: true width:800 height:600 Image {
 id: image source: "image.jpg"
 anchors.centerIn: parent }

 MouseArea {
 id: mouseArea anchors.fill: parent hoverEnabled: true onPositionChanged: {
 var x = mouseArea.mouseX;
 var y = mouseArea.mouseY;

 // 在图片上绘制一个标记 image.drawPoint(x, y);

 //保存标记 var savePath = "saved_image.png";
 var img = new QImage(image.source);
 img.save(savePath);
 }
 }
}