Question

我使用darkroom.js在客户端裁剪和旋转图像。它适用于单张图像，但我想要它用于多个图像。任何人都可以为此目的帮助解决此问题或任何其他参考资料。

var dkrm = new Darkroom('#target', {
  // Size options
  minWidth: 100,
  minHeight: 100,
  maxWidth: 600,
  maxHeight: 500,
  ratio: 4/3,
  backgroundColor: '#000',

  // Plugins options
  plugins: {
    //save: false,
    crop: {
      quickCropKey: 67, //key "c"
      //minHeight: 50,
      //minWidth: 50,
      //ratio: 4/3
    }
  },

  // Post initialize script
  initialize: function() {
    var cropPlugin = this.plugins['crop'];
    // cropPlugin.selectZone(170, 25, 300, 300);
    cropPlugin.requireFocus();
  }
});

这是html

<div class="figure-wrapper">
      <figure class="image-container target">
        <img src="./images/domokun-big.jpg" alt="DomoKun" class="edit-img" id="target">
      </figure>
    </div>
    <div class="figure-wrapper">
      <figure class="image-container target">
        <img src="./images/domokun-big.jpg" alt="DomoKun" class="edit-img" id="target">
      </figure>
    </div>

我还将id="target"更改为class="target"，但它不适用于多个

Extensions url

Answer 1

这实际上不是你问题的答案，而是我对这个主题的一些研究的结果。

首先，我不能让Darkroom使用图像的class属性。有js错误 - 似乎Darkroom使用给定的选择器（在示例中为id）发出http请求以获取dom元素。如果你从Jquery选择中向他提供来自类的当前元素，它将无效。

我已经做了一点处理这种情况。你可以在这个仓库中看到它（由标准的暗室演示制作）：https://github.com/renta/darkroomtest

如您所见，此决定存在一些问题。它看起来像一个肮脏的黑客，用户改变了他对图像编辑的看法 - 他可以在点击保存按钮后关闭Darkroom面板。

我还有第二种方法可以解决这个问题。如果有人对它感兴趣，我可以把代码放在公共回购中。

那里的主题演讲：

你有一个有几张图片的画廊;
点击当前图像后，会出现一个打开模态窗口，其中包含此图像或其原始图像（如果图像是预览图像）。对于模态窗口，我使用这个库https://github.com/samdark/the-modal（而不是广告:)）。它能够在打开模态窗口时进行自定义功能，在那里我可以放置图像并在其上启动暗室库。
使用暗室保存图像并关闭模态窗口。之后，您可以轻松更新库中的图像，以便用户在关闭模式后可以看到结果。

这种变体是可行的，没有大规模编辑方法的问题。

希望，这个答案对某人有帮助。

图像裁剪并使用暗室js旋转多个图像

1 个答案: