Overview
Implementation
javascript images cropping ui

Crop Corner Drawing tool

This package allows you to draw the four corners of a shape that can then be taken through for cropping using your preferred [front or back-end] method.

The tool presents a given image and four points that can then be moved to represent the new crop points.

The result will be a series of coordinates that can be used with your chosen crop utility, e.g. open-js, imagick, etc.

The cropper UI, once triggered will show an overlay to present the image as large as possible without zooming, some red corner points, and some buttons including Save/Apply and Cancel, Rectangle shape, and Trapezium shape. The shape choice provides a way to move the corners together or independently, and the Save/Apply and Cancel buttons allow you to collect the corner positions with or without a preview.

Cropping is expected to be applied outside of this tool and is triggered through a callback from the tool to your given function (which is expected to have three arguments = (srcImg, maskTypeCd, csv) where the csv is a comma separated list of values starting with :

  1. scaled crop width and
  2. scaled crop height,

followed by the x/y coordinates of the :

  1. scaled-top-left-xy-point,
  2. scaled-top-right-xy-point,
  3. scaled-bottom-right-xy-point,
  4. scaled-bottom-left-xy-point ).

Mouse & Touch capable (as of release 1.0)

  • Windows:check
  • Android:check
  • iOS: check

Implementation

Implementation is simple:

html
<head>
   <script src='https://methodfish.com/Download/MFCropCornerUI/files/latest/js/mf-cropcorner-ui.js'></script>
   <link  href='https://methodfish.com/Download/MFCropCornerUI/files/latest/css/mf-cropcorner-uicss' rel='stylesheet'></link>
</head>

<body>
   <img src='....'>
   <button onClick='showCropper()'>Crop...</button>


javascript
function showCropCornerUI(flag) {
    let img = document.querySelector('img');
    let existingMask='';
    _cropFlag = flag;
    _cropper=new MFCropCornerUI();
    _cropper.doOpenCropUI(img
        , existingMask
        , false
        , _ALLOW_TRAPEZIUM_CROPS
        , doCropCornerUICallback
        , doCropCornerUICancelCallback
        , flag);
    _cropper.doCropTrapezium();
}
// -
function doCropCornerUICallback(srcImg, maskTypeCd, csv) {
   const [canvasWidth, canvasHeight, ...otherPoints] = csv.split(',').map(Number);
   _cropper.doCancelCropUI();
   ....
}
// -
function doCropCornerUICancelCallback() {
    console.log('doCropCornerUICancelCallback example');
    let applyBut = document.querySelector('.mf-cropApplyMask');
    if ( _cropFlag!='save' && applyBut.innerText.toLowerCase().indexOf('save')>-1 ) {
        console.log('undoing crop attempt');
        _cropper.removeElement('.cropSample');
        _cropper.removeClass(document.querySelector('.mf-crop2Canvas'), 'mf-cropHidden');
        _cropper.removeClass(document.querySelector('.mf-cropImageCopy'), 'mf-cropHidden');
        let applyButton = document.querySelector('.mf-cropApplyMask');
        doRecursiveTextReplace(applyButton, 'Save', 'Apply');
        doRecursiveTextReplace(applyButton, 'save', 'done');
        return false;
    }
    else {
        console.log('cancelling crop');
        return true;
    }
}

link Click to view a demo

square

About

License

Latest Release

Version 1.038 weeks ago

Also see

articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/imagick-fiddlesquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnDataBarsquareprojects/MFColumnGradientsquareprojects/MFCropCornerUIsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquareprojects/MFShowConsolesquare
PrivacyCookies