javascript - Sketch.js如何导出/导入数据(导入为图像，透明线不透明)

Question

我正在使用 Sketch.js ( http://intridea.github.io/sketch.js/ ) 创建一个简单的绘图 Canvas 。

当我尝试将图像加载到 Canvas 以参与绘图时遇到问题(在我的网站上，用户绘制并保存，一段时间后可以返回并编辑)，但我通过注释行 this.el.width = this.canvas.width() 在 redraw() 函数中，在 Sketch.js 文件内，正如我在其他 SO 问题 ( html5 canvas background image disappear on mousemove ) 中看到的那样。现在用户可以编辑他的绘图。

问题是，注释掉这一行后，当我尝试将标记的颜色设置为半透明时(例如:rgba(0,0,0,0.1))，它不透明(或在绘制另一条线时转换为不透明)。

您可以在这里查看:https://jsfiddle.net/1fhuwdb9/4/

有谁知道如何解决这个问题吗？ 谢谢大家，非常感谢!

Answer 1

当您绘制某些内容时，脚本会重新绘制图像。因为您注释掉了该行，所以旧图像没有被清除，现在有很多堆叠的图像。脚本有效，您正在绘制透明线，但出现了许多堆叠层，因此透明线变得几乎不透明。

您无需注释该行即可导入或保存草图的内容。在函数内部，“this.actions”存储所有用户 Action 。您应该只将其保存在数据库中，可能是 json，然后在开始时加载它并调用绘制。

为了使其真正成为 Sketch 的一部分，我们将向 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"]在您的服务器上或数据库内。

现在，将其添加到 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 的属性element并从json中解析它，将 Action 添加到新图像的 Action 列表中，然后绘制图像。

现在，您只需添加 data-actions='HERE COMES THE JSON WHICH YOU SAVED ON THE SERVER ON DB'到 Canvas (例如:<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"]时在文件或数据库内，不要忘记清理它( Fastest way to check if a string is JSON in PHP? 和 Sanitize JSON with php )。