Javascript 使用暗室js对多个图像进行图像裁剪和旋转

我使用

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”

，但它不适用于多个

---

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

首先，我不能让暗室使用图像的class属性。这是一个js错误——似乎暗室使用给定的选择器（示例中的id）发出http请求以获取dom元素。如果您从Jquery selection中给他类中的当前元素，它将不起作用

我做了一点小技巧来处理这种情况。您可以在本回购协议（由标准暗室演示制作）中看到：

正如你所看到的，这个决定存在一些问题。这看起来像一个肮脏的黑客，用户改变了对图像编辑的想法-他可以在点击保存按钮后关闭暗室面板

我还有第二种解决这个问题的方法。如果有人对此感兴趣，我可以将代码公开回购

这里的基调是：

• 你有一个画廊有几个图像
• 单击当前图像后，将打开一个模式窗口，其中包含此图像或其原始图像（如果图像是预览图像）。对于模式窗口，我使用此库（不是广告：））。它有能力在打开模式窗口时定制功能，在那里我可以放置图像并在其上启动暗室库
• 使用暗室保存图像并关闭模式窗口。之后，您可以轻松地更新图库中的图像，以便用户可以在关闭模式后看到结果

此变体是可行的，并且没有大规模编辑方法的问题

---

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

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

首先，我不能让暗室使用图像的class属性。这是一个js错误——似乎暗室使用给定的选择器（示例中的id）发出http请求以获取dom元素。如果您从Jquery selection中给他类中的当前元素，它将不起作用

我做了一点小技巧来处理这种情况。您可以在本回购协议（由标准暗室演示制作）中看到：

正如你所看到的，这个决定存在一些问题。这看起来像一个肮脏的黑客，用户改变了对图像编辑的想法-他可以在点击保存按钮后关闭暗室面板

我还有第二种解决这个问题的方法。如果有人对此感兴趣，我可以将代码公开回购

这里的基调是：

• 你有一个画廊有几个图像
• 单击当前图像后，将打开一个模式窗口，其中包含此图像或其原始图像（如果图像是预览图像）。对于模式窗口，我使用此库（不是广告：））。它有能力在打开模式窗口时定制功能，在那里我可以放置图像并在其上启动暗室库
• 使用暗室保存图像并关闭模式窗口。之后，您可以轻松地更新图库中的图像，以便用户可以在关闭模式后看到结果

此变体是可行的，并且没有大规模编辑方法的问题

希望这个答案能帮助别人