Slim Image Cropper Alternative

In this short tutorial we’ll use the PinturaInput Web Component to replace a Slim Image Cropper instance with the more powerful Pintura Image Editor SDK.

The <pintura-input> web component core functionality is similar to Slim, it handles image editing and uploading for one image.

Because the component is using Pintura image editor it offers a lot more additional functionality than the image cropping and rotation features in Slim.

Let’s take a look at a working PinturaInput component.

From Slim Image Cropper To Pintura Input

Let’s use a default Slim editor template as our starting point.

<div
    class="slim"
    data-ratio="16:9"
    data-service="async.php"
    data-size="800,600"
    data-min-size="400,300"
>
    <input type="file" name="slim[]" />
</div>

Before we continue please note that in an effort to too keep the code snippets concise the PinturaInput default template is not shown, instead we’ll show a placeholder comment.

Let’s get started.

We replace the Slim element with the <pintura-input> web component tag, we can remove the original file input element.

<pintura-input image-crop-aspect-ratio="16/9" name="image">
    <!-- template placeholder -->
</pintura-input>

All serializable editor properties can be defined as an attribute on the PinturaInput element. Other properties will have to be defined elsewhere.

Let’s see how we can convert the data-size and data-min-size attributes to Pintura.

<script>
    window.myPinturaInput = {
        imageWriter: {
            targetSize: {
                width: 800,
                height: 600,
            },
        },
        imageCropMinSize: {
            width: 400,
            height: 300,
        },
        locale: {
            labelButtonExport: 'Confirm',
        },
    };
</script>

<pintura-input id="myPinturaInput" image-crop-aspect-ratio="16/9" name="image">
    <!-- template placeholder -->
</pintura-input>

We’ve created a global variable called myPinturaInput and have also set that as the id of our PinturaInput component.

We used the imageWriter property to set the intended output size, and have set the imageCropMinSize property to defined the minimum crop size.

Additionally we used the locale property to rename the button label to match the Slim Image Cropper button label.

Let’s now look at the Slim data-service attribute.

Uploading Synchronously

Using the PinturaInput we aren’t required to upload our files asynchronously, edited images can be submitted with a normal form post. We no longer need the data-service attribute.

Skip to Uploading Asynchronously if you still want to upload asynchronously.

Let’s look at the code needed for a default form post with file upload and image edit field.

<form method="POST" action="upload.php">
    <pintura-input image-crop-aspect-ratio="16/9" name="image">
        <!-- template placeholder -->
    </pintura-input>

    <button type="submit">Upload</button>
</form>

This code above will submit the edited file to the upload.php PHP script, there it can be accessed with $_FILES["image"], see this Image Uploading With PHP tutorial for additional information.

Uploading Asynchronously

If we still want upload images asynchronously we can do so with the store attribute, files can be handled with the same upload.php script. Uploads handled this way will show a nice progress indicator.

<pintura-input image-crop-aspect-ratio="16/9" store="upload.php" name="image">
    <!-- template placeholder -->
</pintura-input>

After the file has finished uploading the PinturaInput component will create a hidden input element and set the name attribute to the name of the PinturaInput component, the server response will be set to the value attribute.

In the example below the server has returned 1234 representing the id of the file on the server.

<pintura-input image-crop-aspect-ratio="16/9" store="upload.php" name="image">
    <!-- This element is created by Pintura Input -->
    <input type="hidden" name="image" value="1234" />

    <!-- template placeholder -->
</pintura-input>

Conclusion

With a couple of code adjustments we can switch to Pintura without much trouble and get a way more powerful image editor in return.

Pintura ships with example projects for all kinds of JavaScript frameworks making the switch from Slim to Pintura even easier.

If you’ve decided to switch over and need any help transitioning from Slim Image Cropper to Pintura, get in touch, I’m always happy to lend a hand.