Question

我坚持使用我的代码。

问题：我有画布，在里面画画线。在我完成之后，我希望这些线路保持在我离开的正确位置（在重新加载网站之前）。所以我需要将该画布发送到mysql数据库。但在这里我卡住了。我是否首先需要创建.png图像，然后尝试将该图像信息发送到数据库？或者不知怎的，我可以使用AJAX将它从代码发送到数据库？我读了很多信息，现在我很困惑。

如果我将使用方法/*! * \class CentralWiget * \brief The CentralWidget class is a subclass ofQWidget. */ #ifndef CENTRALWIDGET_H #define CENTRALWIDGET_H #include <QWidget> #include "containerinterface.h" #include <QMap> #include <QString> class QHBoxLayout; class UIElementInterface; class QPoint; class QSize; class PushButton; class CheckBox; class ComboBox; class Image; class Led; class Text; class TabWidget; class QTabWidget; class TreeWidget; class CentralWidget : public QWidget, public ContainerInterface { Q_OBJECT private: QHBoxLayout* m_layout; QMap<QString, UIElementInterface*> m_uiElementMap; public: CentralWidget(QWidget* parent = 0); ~CentralWidget(); void setUIElement(const QString& define, UIElementInterface* UIElement); UIElementInterface* getUIElement(const QString& define); void createHorizontalLayout(); void addWidgetToLayout(QWidget* widget); PushButton* createButton(const QString &label, const QString &define, const QPoint& topLeft, const QSize& size); CheckBox* createCheckBox(const QString &label, const QString &define, const QString &header, const QPoint& topLeft, const QSize& size); ComboBox* createComboBox(const QString &label, const QString &define, const QString &header, const QPoint& topLeft, const QSize& size); Image* createImage(const QString &file, const QString &define, const QPoint& topLeft, const QSize& size); Led* createLed(const QString &define, const QString &onColor, const QString &offColor, const QPoint& topLeft, const QSize& size); Text* createText(const QString &define, const QString &label, const QPoint& topLeft, const QSize& size); TabWidget* createTabWidget(const QPoint& topLeft, const QSize& size); TreeWidget* createTreeWidget(const QStringList& labels, const QPoint& topLeft, const QSize& size); void connectUIElement(const QString& signalName, const QString& slotName, UIElementInterface* UIElement); private slots: void setDef(QString s); void sendCom(QString s); }; #endif `和HTMLgetImageData()，那么我需要在服务器中创建一些真实的图像？或者我可以直接从画布上拿走？并发送到mysql数据库？ :)

所以现在我用html中的Canvas和一些绘制线条的脚本：

HTMLputImageData()

也许有人可以向我推荐一些东西？也许是关于下一步的事情？从这一刻开始我该怎么做？

Answer 1

嗯，这取决于您是将Canvas保存为单个图像，还是保存它的每个组件（如线条，方块等）。

如果您将其保存为单个图像，则将数据URL保存到数据库会更容易。否则，创建包含每个形状的属性和值的JavaScript对象，例如：

var line =
{
    Name: "Line",
    Color: "#3D4AEE",
    Shadow: "NULL"
    Length: "",
    Point: "130, 120"
}

然后将对象转换为JSON字符串：

var JSONLine = JSON.stringify(line);

现在您可以将某些内容插入到数据库中。

现在，当您需要从数据库中检索它时，您可以在浏览器中重新绘制它，您只需查找“设计”，获取构成该设计的所有位并将它们重绘为画布，使用您保存的形状的属性。

我将由您决定如何构建数据库以适应不同类型的形状，以及它们与创建的“设计”的关系。

Answer 2

1。您可以在不使用AJAX重新加载页面的情况下保存数据库中的坐标，然后通过AJAX获取坐标并在Javascript中动态设置它们。如果你想使用一个使AJAX请求更容易使用的JS库，我推荐jQuery http://api.jquery.com/jquery.ajax/

2. 您可以使用类似

的内容将画布转换为图像

function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}

然后将图像保存在数据库中。但是，您无法以这种方式更改画布，它将是一个图像。第一种方法允许您使用它的信息保存画布。有点像Photoshop和.PSD文件。

Answer 3

首先，您应该使用Canvas.toDataURL导出数据。之后，您可以使用FormData通过Fetch API发送数据。

var fd = new FormData();
fd.append('field', canvas.toDataURL('image/jpg'), 'sketch.jpg');
fetch('/saveSketch', {
  method: 'POST',
  body: fd,
});

在服务器端，您需要解析此FormData以检索文件。目前，您的文件已经可以保存到数据库或文件系统中。

保存在mysql数据库上的HTML画布

3 个答案: