cropit icon indicating copy to clipboard operation
cropit copied to clipboard

Keep Image Position Center After Rotate

Open Rupato opened this issue 3 years ago • 0 comments

Currently On rotating the image 90deg the image touches the right border 180deg it touches the bottom border and at 270deg it touches the left border Wanted the image position to be in the center after rotation managed to get the image in the center by calculating and resetting the translate value on rotate but the data(data64..) required to export the image on the cropit preview does not change.

` HTML

                                <!-- This range input controls zoom -->
                                <!-- You can add additional elements here, e.g. the image icons -->
                                <!-- This is where user selects new image -->
                                <input type="file" class="noscroll-img-file cropit-image-input desktop-cropit hide" name="content-box-desktop-file" accept="image/jpeg, image/jpg, image/png, image/gif" />

                                <input type="range" class="cropit-image-zoom-input hide" />
                                <!-- The cropit- classes above are needed
    so cropit can identify these elements -->
                                <button class="rotate-ccw desktop-buttons-ccw hide">Rotate counterclockwise</button>
                                <button class="rotate-cw desktop-buttons-cw hide">Rotate clockwise</button>
                                <span class="hide rotationValue"></span>
                                <span class="hide stroredTrans"></span>
                            </div>

JS function initialiseCropIT() { var $imageCropper = $('#image-cropper-desktop').cropit({ //imageBackground: true, minZoom: 'fit', maxZoom: '5', smallImage: 'allow', imageBackground: false, allowDragNDrop: true, fitWidth: true, fitHeight: true, onImageLoaded: function () { cropD = "false"; rotateD = 0; zoomD = 0; $('#image-cropper-desktop').find('.desktop-cropit-preview').css('background', 'none'); }, onZoomChange: function () { zoomD = $('#image-cropper-desktop').find('.cropit-image-zoom-input').val(); } }); $imageCropper.cropit(); } `

Rupato avatar Aug 24 '20 13:08 Rupato