Question

我使用插件cropitjs裁剪用户选择的图片。我希望用户通过文件输入ONCE选择图像文件，并使两个cropit实例加载相同的图像。

我已尝试使用jquery克隆文件输入，但无法将其加载到预览中。

您可以查看此here

的托管预览

现在，文件输入提示两次，如果我选择两次文件，则两个cropit实例会加载图像。我希望能够使用一个文件输入来加载两个裁剪实例＆＃34; image-editor1＆＃34;和＆＃34;图像编辑器＆＃34;如HTML标记所示。

注意：最终结果是将相同的图像裁剪为两种不同的尺寸。

这是我的HTML

<!-- COVER IMAGE -->
<div class="large-6 medium-6 small-12 columns">

    <div class="image-editor1">
        <input type="file" class="cropit-image-input" id="cropimg">
          <div class="select-image-btn">
            <label for="file" class="sr-only"><i class="ion-ios-camera-outline genicon"></i>ކަވަރ ފޮޓޯ އެއް އަޕްލޯޑް ކުރަށްވާ</label>
          </div>
        <div class="cropit-preview"></div>

        <div class="zoomcl">
            <i class="ion-image zoom2"></i>
            <input type="range" class="cropit-image-zoom-input">
            <i class="ion-image zoom1"></i>
        </div>
        <div class="filename"></div>
        <input type="hidden" name="imgdata" class="imgdata" />

    </div>

 </div>

 <!-- MOBILE COVER IMAGE -->
 <div class="large-6 medium-6 small-12 columns">

    <div class="image-editor2" id='imgedit1'>
        <input type="file" class="cropit-image-input">

        <div class="select-image-btn">
            <label for="file" class="sr-only"><i class="ion-ios-camera-outline genicon"></i>ކަވަރ ފޮޓޯ އެއް އަޕްލޯޑް ކުރަށްވާ</label>
          </div>

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

        <div class="zoomcl">
            <i class="ion-image zoom2"></i>
            <input type="range" class="cropit-image-zoom-input">
            <i class="ion-image zoom1"></i>
        </div>   
        <input type="hidden" name="imgdata" class="imgdata" />

    </div>

 </div>

这是JS

 $('.select-image-btn').click(function() {

        $('.cropit-image-input').click();

        $('.image-editor1').cropit({
            imageBackground: true,
            imageBackgroundBorderWidth: 15,
            exportZoom: 4
        });

        $('.image-editor2').cropit({
            imageBackground: true,
            imageBackgroundBorderWidth: 15,
            exportZoom: 4

        });
    });

提前感谢您的帮助。：）

使用一个文件输入加载两个CROPIT.js实例

0 个答案: