Code Monkey home page Code Monkey logo

yii2-cropper's Introduction

Yii2-cropper

Wrapper for Image Cropper javascript library

Installation

Run

composer require "demi/cropper" "~1.0"

Usage


hint: functionality of this extension is already implemented into my extension to image uploading

echo Cropper::widget([
    // If true - it's output button for toggle modal crop window
    'modal' => true,
    // You can customize modal window. Copy /vendor/demi/cropper/views/modal.php
    'modalView' => '@backend/views/image/custom_modal',
    // URL-address for the crop-handling request
    // By default, sent the following post-params: x, y, width, height, rotate
    'cropUrl' => ['cropImage', 'id' => $image->id],
    // Url-path to original image for cropping
    'image' => Yii::$app->request->baseUrl . '/images/' . $image->src,
    // The aspect ratio for the area of cropping
    'aspectRatio' => 4 / 3, // or 16/9(wide) or 1/1(square) or any other ratio. Null - free ratio
    // Additional params for JS cropper plugin
    'pluginOptions' => [
        // All possible options: https://github.com/fengyuanchen/cropper/blob/master/README.md#options
        'minCropBoxWidth' => 400, // minimal crop area width
        'minCropBoxHeight' => 300, // minimal crop area height
    ],
    // HTML-options for widget container
    'options' => [],
    // HTML-options for cropper image tag
    'imageOptions' => [],
    // Translated messages
    'messages' => [
        'cropBtn' => Yii::t('app', 'Crop'),
        'cropModalTitle' => Yii::t('app', 'Select crop area and click "Crop" button'),
        'closeModalBtn' => Yii::t('app', 'Close'),
        'cropModalBtn' => Yii::t('app', 'Crop selected'),
    ],
    // Additional ajax-options for send crop-request. See jQuery $.ajax() options
    'ajaxOptions' => [
        'success' => new JsExpression(<<<JS
            function(data) {
                // data - your JSON response from [[cropUrl]]
                $("#myImage").attr("src", data.croppedImageSrc);
            }
JS
        ),
    ],
]);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.