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

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() 来刷新 Canvas 中的数据，但我不知道如何使用这个函数。 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();
  });
});