使用cropit的多个预览图像不同的高度和宽度

Posted 2023-02-25

【中文标题】使用cropit的多个预览图像不同的高度和宽度

【英文标题】：Multiple Preview images diffrent height and width using cropit

【发布时间】：2015-12-21 03:52:08

【问题描述】：

裁剪和调整图像大小是构建 cms 的常见问题，所以我发现了很棒的插件 here 该插件在桌面和移动触摸屏上运行良好，但我的项目中有最后一个问题如何在此页面中进行多个预览！

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

然后我检查了 jquery.cropit.js 第 927 行有类cropit-image-preview 意味着将加载图像，所以我做

  <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> 

然后我复制 jquery.cropit.js 并将其重命名并将第 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;
    );

  );

老实说，这来自演示 here 和 issue，但作者没有回应，有人已经在 *** 中发帖，但没有明确的解释，感谢您的任何评论

【参考方案1】：

我想我首先要提到的是，默认情况下，cropit 插件开箱即用，具有两种不同大小的预览。您只需向“cropit-preview”添加一个类即可对其进行样式设置。 Here is a JSfiddle example。我在上面的代码中看到的主要问题是您将第二个预览类的预览类从“cropit-image-preview”更改为“cropit-image-preview-test”。这不应该改变。

另外，在最新版本的cropit 插件（我相信是0.5）中，这个预览类和它周围的帮助类已经改变了。我知道您是从其他来源复制的，但在尝试解决此问题之前，我会确保您使用的是最新版本。你可以在他们的 Github 上查看文档：//github.com/scottcheng/cropit

我的例子：

如果您想摆脱丑陋的文件上传按钮，请按照以下示例进行操作。 Here is the 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
);

然后我为我为每个cropit创建的按钮添加了一个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 是一个已编译的 LESS 文件，因此它看起来很多，但您需要为您创建的每个裁剪区分开样式，以便更改每个预览的尺寸。我会假设你会有自己的方式来完成你的造型。

HTML

这是两个部分的完整 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>