使用凹坑的多幅预览图像不同的高度和宽度

Question

裁剪和调整大小的图像是一个常见的问题，构建cms，所以我发现伟大的插件这里插件工作良好的桌面和移动触摸屏，但我的最后一期在我的项目，如何使多个预览在这个页面！

已经看过那里的问题，发现有人发了和我一样的问题，所以我在这里挖掘但不工作，发布这里

然后我检查了jquery.cropit.js第927行有类-图像预览方法会加载图像，所以我做了

  <form action="#">
  <div class="image-editor">
    <input type="file" class="cropit-image-input">
    <div class="cropit-image-preview"></div>
    <div class="image-size-label">
      Resize image
    </div>
    <input type="range" class="cropit-image-zoom-input">
    <input type="hidden" name="image-data" class="hidden-image-data" />
    <button type="submit">Submit</button>
  </div>

  <!--diffrent class with cropit-image-preview with diffrent height and width-->
   <div class="image-editor-test">
    <input type="file" class="cropit-image-input">
    <div class="cropit-image-preview-test"></div>
    <div class="image-size-label">
      Resize image
    </div>
    <input type="range" class="cropit-image-zoom-input">
    <input type="hidden" name="image-data" class="hidden-image-data" />
    <button type="submit">Submit</button>
  </div>
 </form> 

然后我复制并重命名它，并将第927行改为cropit-image-preview-test，并且css也在这里。

.cropit-image-preview {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 250px;
    height: 250px;
    cursor: move;
  }

   .cropit-image-preview-test {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 300px;
    height: 300px;
    cursor: move;
  }

这是我的js

$(function() {
    $('.image-editor').cropit();

    $('form').submit(function() {
       var imageData = $('.image-editor').cropit('export');
       $('.hidden-image-data').val(imageData);
       var formValue = $(this).serialize();
       $('#result-data').text(formValue);
      return false;
    });

    <!--test preview image-->
    $('.image-editor-test').cropit();

    $('form#test').submit(function() {
       var imageData = $('.image-editor-test').cropit('export');
       $('.hidden-image-data-test').val(imageData);
       var formValue = $(this).serialize();
       $('#result-data-test').text(formValue);
      return false;
    });

  });

老实说，这来自于演示这里和问题，但是作者没有回应，已经有人在堆栈溢出中发布，但没有明确的解释，谢谢您的评论。

Answer 1

我想我想要提到的第一件事是，默认情况下，这个钩子插件可以通过两种不同大小的预览来实现。您只需要添加一个类到“鳄鱼预览”，以使它的风格。下面是一个JSfiddle示例。我在上面的代码中看到的主要问题是，对于第二个预览类，您将预览类从“cropit预览”更改为“cropit预览-test”。这种情况不应改变。

另外，在最近版本的cropit插件(我相信是0.5)中，这个预览类和它周围的助手类已经改变了。我知道您从另一个来源复制了这个版本，但是在尝试修复这个问题之前，我会确保您使用的是最新版本。您可以在它们的Github: //github.com/scott城/cropit上查看这些文档。

我的例子：

如果您想摆脱丑陋的文件上传按钮，请遵循下面的示例。这是JSFiddle用于完整的工作示例和参考。我还在Javascript部分中包含了cropit插件，因为它不在CDN上，所以您需要一直向下滚动以查看页面的嵌入代码(我在页面上的示例中删除了它们)。

注意：，我没有展示如何处理图像，以便上传并传递给服务器，因为这不是问题的一部分。在我的申请中，我在表单提交过程中处理了这个过程。

JAVASCRIPT

我将每个cropit分配给一个变量，以便稍后在脚本中使用它(在本例中，它被用于超时值函数)。

var memberCropper = $('#image-cropper');

var ballotCropper = $('#ballot-image-cropper');

然后，使用包含的一些选项(您的方法可能会因应用程序的不同而有所不同)初始化了cropit方法。

memberCropper.cropit({
  imageBackground: true,
  imageBackgroundBorderWidth: 10
});

ballotCropper.cropit({
  imageBackground: true,
  imageBackgroundBorderWidth: 10
});

然后，我为我为每个钩子创建的按钮添加了一个onclick函数。这允许您隐藏丑陋的默认文件选择选项。

$('.select-image-btn').click(function() {
    memberCropper.find('.cropit-image-input').click();
});

$('.ballot-select-image-btn').click(function() {
    ballotCropper.find('.cropit-image-input').click();
});

CSS

位于小提琴中的CSS是一个编译较少的文件，这就是为什么它看起来很像，但您需要为您创建的每个花盆分离样式，以便更改每个预览的维度。我将假设您将有自己的方式完成您的风格。

以下是这两个部分的完整HTML。

​

<div id="ballot-image-cropper">
  <div class="ballot-select-image-btn btn btn-success">Update Ballot Image</div>

    <div class="cropit-preview ballot-cropit-preview"></div>

    <input type="range" class="cropit-image-zoom-input">

    <input type="file" class="cropit-image-input" name="ballotImage" id="ballotImage" />
</div>


<div id="image-cropper">
  <div class="select-image-btn btn btn-success">Add Member Image</div>
    <div class="cropit-preview"></div>

    <input type="range" class="cropit-image-zoom-input">

    <input type="file" class="cropit-image-input" name="memberImage" id="memberImage" />
  </div>

​