Convert JS function to Perl

gistfile1.pm

use strict;

# https://github.com/fengyuanchen/cropperjs/blob/94328c9497c526446f749640c3fa6192ded09035/src/js/utilities.js
# https://github.com/fengyuanchen/cropperjs/blob/0da5c741102489a130e72c92785b7dfda97e5b37/dist/cropper.js
# https://github.com/fengyuanchen/cropperjs/blob/master/src/js/preview.js

sub preview {
    my $self = shift;
    my $args = shift;

    my $imageData     = $args->{imageData};
    my $canvasData    = $args->{canvasData};
    my $cropBoxData   = $args->{cropBoxData};
    my $cropBoxWidth  = $cropBoxData->{width};
    my $cropBoxHeight = $cropBoxData->{height};
    my $width         = $imageData->{width};
    my $height        = $imageData->{height};
    my $left          = $cropBoxData->{left} - $canvasData->{left} - $imageData->{left};
    my $top           = $cropBoxData->{top} - $canvasData->{top} - $imageData->{top};
    my $transform     = $self->getTransform($imageData);

    # CSS code. not implement. it should be string
    my $transforms = 'WebkitTransform: ' + transform + '; msTransform: ' + transform + '; transform: ' + transform + ';';

    if (!$args->{cropped} || $args->{disabled}) {
        return;
    }

    $args->{viewBox}{img}{transforms} = $transforms + 'width: ' + $width + 'px; height: ' + $height + 'px; margin-left: -' + $left + 'px; margin-top: -' + $top + 'px;';

    # not loop
    my $data         = '' # <--- var data = getData(element, DATA_PREVIEW);
    my $originWidth  = $data->{width};
    my $originHeight = $data->{height};
    my $newWidth     = $originWidth;
    my $newHeight    = $originHeight;
    my $ratio        = 1;

    if ($cropBoxWidth) {
        $ratio     = $originWidth / $cropBoxWidth;
        $newHeight = $cropBoxHeight * $ratio;
    }

    if ($cropBoxHeight && $newHeight > $originHeight) {
        $ratio     = $originHeight / $cropBoxHeight;
        $newWidth  = $cropBoxWidth * $ratio;
        $newHeight = $originHeight;
    }

    $args->{style} = 'width: ' + $newWidth + 'px; height: ' + $newHeight + 'px;';

    $args->{element}{img}{transforms} = $transforms + 'width: ' + $width * $ratio + 'px; height: ' + $height * $ratio + 'px; margin-left: -' + $left * $ratio + 'px; margin-top: -' + $top * $ratio + 'px;';
}

sub getTransform {
    my $self = shift;
    my $args = shift;

    my @transform;
    my $rotate = $args->{rotate};
    my $scaleX = $args->{scaleX};
    my $scaleY = $args->{scaleY};

    if ($rotate) {
        push @transform, 'rotate(' . $rotate . 'deg)';
    }

    if ($scaleX && $scaleY) {
        push @transform, 'scale(' . $scaleX . ',' . $scaleY .')';
    }

    return (scalar @transform)? join ' ', @transform : 'none';
}

1;