Question

我正在尝试使用Electron制作一个简单的图像查看器应用程序，并且可以编辑图像。我正在使用CamanJS进行图像处理效果，但我遇到了一个小问题。当我加载包含所有图像的文件夹时，我可以滚动浏览它们，同样，我可以对图像编号3应用一些过滤器，例如，保存它并滚动下一个。但是，当我尝试编辑另一个图像时，比如5号，当我按下按钮时，它会渲染图像nr 3并将效果应用于图像nr 3.我试图解决这个错误但没有成功。有人能帮我吗？贝娄是一些代码。

以下是“网页”上的图片

<canvas id="currentImage" class="img-thumb center"></canvas>

我有一个包含文件夹中图像的索引数组，我会遍历它以更改显示的图像。以下是我如何更改图像的功能：

var onPreviousClick = function() {
  var currentImageId = $currentImage.data('currentIndex');
  if (currentImageId > 0) {
    showImage(--currentImageId);
  }
};

这就是我将Lomo效果应用于图像的方式：

$lomobtn.on('click', function() {
  Caman('#currentImage', function() {
    this.lomo().render();
  });
});

我认为这与this有关。第一次按下按钮时它会引用第一个图像，第二次按下按钮时它也会引用第一个图像。

更新

我发现我必须使用函数reloadCanvasData()来刷新画布中的数据，但我无法找到如何使用此函数。 https://github.com/meltingice/CamanJS/blob/master/src/core/caman.coffee#L387-L392 有人可以帮我使用这个功能吗？尝试了不同的方法来调用此函数，我收到并错误。

Answer 1

这是几个月前的问题，但希望仍然适合您或其他人。

我有同样的问题。只需使用它：

$lomobtn.on('click', function() {
  Caman('#currentImage', function() {
    this.reloadCanvasData() // <--- here, before you apply your filter
    this.lomo().render();
  });
});

使用CamanJS的图像查看器/编辑器

1 个答案: