Can we Zoom and Rotate at the same time in one drag event ?

[MrShaikh01]

If you have tried Google Photos's editing feature.. in that we can Zoom and Rotate at the same time. Can we create something like that using cropper.js.

I have tried one demo code but its not working smoothly also zoom + rotate not working as expected. it will be helpful if you can help me out with any demo solution or code.

Please refer attached image. @fengyuanchen

[MrShaikh01]

if any one can help me in this.

[MrShaikh01]

I would like to update few code.

I have somehow achieved the smoothness on Rotation + Zoom like asked above.. this i have achieved using rotateTo function and scale to below mention code

function getTransforms(_ref) {

    var rotate = _ref.rotate,
        **scale = Math.abs(1 + (Math.abs(_ref.rotate) * 0.030)),**
        scaleX = _ref.scaleX,
        scaleY = _ref.scaleY,
        translateX = _ref.translateX,
        translateY = _ref.translateY;
    var values = [];

    if (isNumber(translateX) && translateX !== 0) {
        values.push("translateX(".concat(translateX, "px)"));
    }

    if (isNumber(translateY) && translateY !== 0) {
        values.push("translateY(".concat(translateY, "px)"));
    } // Rotate should come first before scale to match orientation transform

    if (isNumber(rotate) && rotate !== 0) {
        values.push("rotate(".concat(rotate, "deg)"));
    }

    //if (isNumber(scale) && scale !== 0) {
    //    values.push("scale(".concat(scale, ")"));
    //}

    if (isNumber(scaleX) && scaleX !== 1) {
        values.push("scaleX(".concat(scaleX, ")"));
    }

    if (isNumber(scaleY) && scaleY !== 1) {
        values.push("scaleY(".concat(scaleY, ")"));
    }

    var transform = values.length ? values.join(' ') : 'none';
    return {
        WebkitTransform: transform,
        msTransform: transform,
        transform: transform
    };
}

But now the problem is when i am calling getCroppedCanvas function it is giving me wrong cropped image. Cropped image's size is too different and also it is not taking the space of that crop area.

Please refer image link mentioned below. and would be very helpful if anybody can help me in this.

https://user-images.githubusercontent.com/36665887/64017778-190ee080-cb48-11e9-8dd2-37cec6a62f71.png

[MrShaikh01]

@fengyuanchen if you can help me in this please.

[fengyuanchen]

Not support that. You may need to refactor the Cropper.js if you are interested in this.