Author: | AlloyTeam |
---|---|
Views Total: | 2,941 views |
Official Page: | Go to website |
Last Update: | October 7, 2018 |
License: | MIT |
Preview:

Description:
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