使用暗室 js 对多张图像进行图像裁剪和旋转答案

【问题标题】：Image crop and rotate for multiple images using dark room js使用暗室 js 对多张图像进行图像裁剪和旋转
【发布时间】：2016-09-28 03:35:43
【问题描述】：

我使用darkroom.js 在客户端裁剪和旋转图像。它适用于单个图像，但我希望它适用于多个图像。任何人都可以为此问题或任何其他参考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

【问题讨论】：

标签： javascript jquery image image-uploading

【解决方案1】：

这实际上不是您问题的答案，而是我对该主题的少量研究的某种结果。

首先，我无法让 Darkroom 使用图像的类属性。存在 js 错误 - 似乎 Darkroom 使用给定的选择器（示例中的 id）发出 http-request 以获取 dom 元素。如果您将 Jquery 选择中的类中的当前元素提供给他，它将不起作用。

我做了一些小技巧来处理这种情况。你可以在这个 repo 中看到它（由标准 Darkroom 演示制作）：https://github.com/renta/darkroomtest

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

我还有第二种方法来解决这个任务。如果有人对此感兴趣，我可以将代码放在公共回购中。

那里的主题演讲：

您有一个包含多张图片的图库；
单击当前图像后，会打开一个带有该图像或其原始图像的模态窗口（如果图像是预览）。对于模态窗口，我使用这个库https://github.com/samdark/the-modal（不是广告:)）。它能够在打开模态窗口时创建自定义功能，我可以在其中放置图像并在其上启动 Darkroom 库。
您使用 Darkroom 保存图像并关闭模式窗口。之后，您可以轻松地更新图库中的图像，以便用户可以在关闭模式后看到结果。

这个变体是可行的，没有大量编辑方法的问题。

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

【讨论】：