Mobile Image Cropping Library – AlloyCrop.js

AlloyCrop.js is a tiny JavaScript library that provides user- and touch-friendly image cropping functionality for your mobile web applications.

To see it in actions, you must view the demo page on your mobile device:

Installation:

npm install alloycrop

How to use it:

Load the needed CSS3 transform library transform.js and multi-touch gestures library AlloyFinger in the document.

<script src="transform.js"></script>
<script src="alloy-finger.js"></script>

Download and load the AlloyCrop.js in the document.

<script src="alloy-crop.js"></script>

Embed a hidden image you want to crop into the document.

<img src="crop.png" style="display: none;">

Create the crop buttons as follows:

<button class="btn" id="crop_btn">Crop Rect</button>
<button class="btn" id="crop_circle_btn">Crop Circle</button>

Create a result container to display the cropped image.

<div id="crop_result" style="text-align: center; padding-top: 30px; height: 230px; line-height: 300px;"></div>

The example JavaScript to activate the Alloycrop.js:

; (function () {
    var crop_btn = document.querySelector("#crop_btn");
    var crop_result = document.querySelector("#crop_result");
    var crop_circle_btn = document.querySelector("#crop_circle_btn");
    function showToolPanel() {
        crop_btn.style.display = "inline-block";
        crop_result.style.display = "block";
        crop_circle_btn.style.display = "inline-block";
    }
    function hideToolPanel() {
        crop_btn.style.display = "none";
        crop_result.style.display = "none";
        crop_circle_btn.style.display = "none";
        crop_result.innerHTML = "";
    }
    new AlloyFinger(crop_btn, {
        tap: function () {
            hideToolPanel();
            new AlloyCrop({
                image_src: "./asset/test.png",
                width: 200,
                height: 100,
                output: 1.5,
                ok: function (base64, canvas) {
                    crop_result.appendChild(canvas);
                    crop_result.querySelector("canvas").style.borderRadius = "0%";
                    showToolPanel();
                },
                cancel: function () {
                    showToolPanel();
                }
            });
        }
    });
    new AlloyFinger(crop_circle_btn, {
        tap: function () {
            hideToolPanel();
            new AlloyCrop({
                image_src: "./asset/test.png",
                circle: true,
                width: 200,
                height: 200,
                output: 1,
                ok: function (base64, canvas) {
                    crop_result.appendChild(canvas);
                    crop_result.querySelector("canvas").style.borderRadius = "50%";
                    showToolPanel();
                },
                cancel: function () {
                    showToolPanel();
                }

            });

        }
    });
})();

Changelog:

v1.0.4 (10/07/2018)

• Update