how to crop with multiple image upload in single form

[desaikalpesh34]

i am not able to crop image with multiple image form is there any extra codding require??

[bupy7]

at one field - one crop. no other way (

[desaikalpesh34]

ohooooooooo!!!!!

[bupy7]

@desaikalpesh34 There is one way. You need off events after image cropping and initialize plugin at next field.That is, initialize plugin before use it and off field events after used it. And do it for each fields.

<div id="plugin-1" class="cropbox" data-enabled="false">
    <div class="workarea-cropbox">
        <div class="bg-cropbox">
            <img class="image-cropbox">
            <div class="membrane-cropbox"></div>
        </div>
        <div class="frame-cropbox">
            <div class="resize-cropbox"></div>
        </div>
    </div>
    <p>
        <input type="file" accept="image/*">
        <button type="button" class="btn-crop">Crop</button>
    </p>
    <div class="cropped"></div>
    <textarea class="data"></textarea>
</div>
<div id="plugin-2" class="cropbox" data-enabled="false">
    <div class="workarea-cropbox">
        <div class="bg-cropbox">
            <img class="image-cropbox">
            <div class="membrane-cropbox"></div>
        </div>
        <div class="frame-cropbox">
            <div class="resize-cropbox"></div>
        </div>
    </div>
    <p>
        <input type="file" accept="image/*">
        <button type="button" class="btn-crop">Crop</button>
    </p>
    <div class="cropped"></div>
    <textarea class="data"></textarea>
</div>

var idActivePlugin = null,
    initPlugin = function($plugin) {
        $plugin.cropbox({
            selectors: {
                inputInfo: '#' + $plugin.attr('id') + ' textarea.data',
                inputFile: '#' + $plugin.attr('id') + ' input[type="file"]',
                btnCrop: '#' + $plugin.attr('id') + ' .btn-crop',
                resultContainer: '#' + $plugin.attr('id') + ' .cropped'
            },
            variants: [
                {
                    width: 200,
                    height: 200,
                    minWidth: 180,
                    minHeight: 200,
                    maxWidth: 350,
                    maxHeight: 350
                }
            ]
        });
    },
    offEvents = function($plugin) {
        var $image = $plugin.find('.image-cropbox'),
            $frame = $plugin.find('.frame-cropbox'),
            $workarea = $plugin.find('.workarea-cropbox'),
            $membrane = $plugin.find('.membrane-cropbox'),
            $resize = $plugin.find('.resize-cropbox'),
            $inputFile = $plugin.find('input[type="file"]'),
            $btnCrop = $plugin.find('.btn-crop');

        // move frame
        $frame.off('mousedown');
        $frame.off('mousemove');
        $(document).off('mouseup');
        // resize frame
        $resize.off('mousedown');
        $(document).off('mousemove');
        $(document).off('mouseup');
        // move image
        $membrane.off('mousedown');
        $membrane.off('mousemove');
        $membrane.off('mouseup');
        $membrane.off('mousewheel');
        // window resize
        $(window).off('resize');
        // select image from file
        $inputFile.off('change');
        // crop image
        $btnCrop.off('click');
    };
$('input[type="file"]').on('click', function() {
    var $plugin = $(this).closest('.cropbox');
    if ($plugin.data('enabled')) {
        var $oldPlugin = $(idActivePlugin);
        offEvents($oldPlugin);
        $oldPlugin.data('enabled', 'false');
    }
    initPlugin($plugin);
    $plugin.data('enabled', 'true');
});

[bupy7]

The reason for closing: No answer.

[axmav]

this solution does not work! How to use idActivePlugin? It is always null!

[bupy7]

@Mazorati

<div id="plugin-1" class="cropbox" data-enabled="false">
    <div class="workarea-cropbox">
        <div class="bg-cropbox">
            <img class="image-cropbox">
            <div class="membrane-cropbox"></div>
        </div>
        <div class="frame-cropbox">
            <div class="resize-cropbox"></div>
        </div>
    </div>
    <p>
        <input type="file" accept="image/*">
        <button type="button" class="btn-crop">Crop</button>
    </p>
    <div class="cropped"></div>
    <textarea class="data"></textarea>
</div>
<div id="plugin-2" class="cropbox" data-enabled="false">
    <div class="workarea-cropbox">
        <div class="bg-cropbox">
            <img class="image-cropbox">
            <div class="membrane-cropbox"></div>
        </div>
        <div class="frame-cropbox">
            <div class="resize-cropbox"></div>
        </div>
    </div>
    <p>
        <input type="file" accept="image/*">
        <button type="button" class="btn-crop">Crop</button>
    </p>
    <div class="cropped"></div>
    <textarea class="data"></textarea>
</div>

var $activePlugin = null,
        initPlugin = function($plugin) {
            $plugin.cropbox({
                selectors: {
                    inputInfo: '#' + $plugin.attr('id') + ' textarea.data',
                    inputFile: '#' + $plugin.attr('id') + ' input[type="file"]',
                    btnCrop: '#' + $plugin.attr('id') + ' .btn-crop',
                    resultContainer: '#' + $plugin.attr('id') + ' .cropped'
                },
                variants: [
                    {
                        width: 200,
                        height: 200,
                        minWidth: 180,
                        minHeight: 200,
                        maxWidth: 350,
                        maxHeight: 350
                    }
                ]
            });
        },
        offEvents = function($plugin) {
            var $image = $plugin.find('.image-cropbox'),
                $frame = $plugin.find('.frame-cropbox'),
                $workarea = $plugin.find('.workarea-cropbox'),
                $membrane = $plugin.find('.membrane-cropbox'),
                $resize = $plugin.find('.resize-cropbox'),
                $inputFile = $plugin.find('input[type="file"]'),
                $btnCrop = $plugin.find('.btn-crop');

            // move frame
            $frame.off('mousedown');
            $frame.off('mousemove');
            $(document).off('mouseup');
            // resize frame
            $resize.off('mousedown');
            $(document).off('mousemove');
            $(document).off('mouseup');
            // move image
            $membrane.off('mousedown');
            $membrane.off('mousemove');
            $membrane.off('mouseup');
            $membrane.off('mousewheel');
            // window resize
            $(window).off('resize');
            // select image from file
            $inputFile.off('change');
            // crop image
            $btnCrop.off('click');
        };
    $('.cropbox input[type="file"]').on('click', function() {
        var $plugin = $(this).closest('.cropbox');
        if ($plugin.data('enabled')) {
            offEvents($activePlugin);
            $activePlugin.data('enabled', 'false');
        }
        $activePlugin = $plugin;
        initPlugin($activePlugin);
        $activePlugin.data('enabled', 'true');       
    });

[bupy7]

No activity.