问Sketch.js如何导出/导入数据(导入为图像，透明线条是不透明的)

EN

当您绘制一些东西时，图像将由脚本重新绘制。因为您注释掉了这一行，旧的图像没有被清除，现在有许多堆叠的图像。脚本工作，您正在绘制透明的线条，但会出现许多层叠的层，因此透明变得几乎不透明。

您不需要注释该行就可以导入或保存草图的内容。在函数中，"this.actions“存储所有用户的移动。您应该只将其保存在数据库中，可能以json的形式保存，然后在开始时加载并调用绘图。

为了使它真正成为Sketch的一部分，我们将向草图脚本添加一些功能。

在Sketch.prototype.download之前，添加以下函数：

Sketch.prototype.export = function() {
  $.post('yourfile.php', { data: JSON.stringify(this.actions) }, function (message_back) { alert(message_back); });
};

它将所有操作转换为JSON，将POST转换为yourfile.php作为$_POST["data"]，并在屏幕上警告您将在yourfile.php中打印的内容。在yourfile.php中，您应该将$_POST["data"]保存在数据库中的服务器o上。

现在，在if ($(this).attr('data-download')) {之前添加以下内容(在新添加的函数之前3-4行可以找到)：

if ($(this).attr('data-export') != undefined) {
  sketch.export();
}

这将帮助您将导出简化为下载结果映像(如data-download，但data-export)：

<a href="#the_id_of_canvas_here" data-export=''>Save your drawing.</a>

现在，让我们构建导入功能：

在this.action = [];之后添加这些行(您可以在第48行找到它)：

if ($(this.canvas).attr('data-actions') != undefined) {
  // Load json and parse it
  this.actions = JSON.parse($(this.canvas).attr('data-actions'));
  // Redraw image by using the data
  this.redraw();
}

它从data-actions元素的canvas属性中获取数据，并从json中解析数据，在新映像的操作列表中添加操作，然后绘制图像。

现在，您只需将data-actions='HERE COMES THE JSON WHICH YOU SAVED ON THE SERVER ON DB'添加到画布中(例如：<canvas id="the_id_of_canvas_here" data-actions='HERE COMES THE JSON WHICH YOU SAVED ON THE SERVER ON DB' width="300" height="300"></canvas>)。

注意:当您将$_POST["data"]保存在文件或数据库中时，不要忘记对其进行消毒(https://stackoverflow.com/questions/6041741/fastest-way-to-check-if-a-string-is-json-in-php和https://stackoverflow.com/questions/37533162/sanitize-json-with-php)。