Show image crop window on image upload

admin管理员组

文章数量:1391991

I'm trying to add image from front end and crop it after upload.

Used setState( 'cropper' ); to enable image crop window.

It open the image upload window. Upload an image. But, Not open Image Crop window.

Reference from .6/src/wp-admin/js/customize-controls.js#L2449

Add Shortcode: [frontend-image-upload]

function frontend_image_upload() {
    wp_enqueue_media();
    wp_enqueue_script( 'media-grid' );
    wp_enqueue_script( 'media' );
    wp_enqueue_script( 'frontend-image-upload', plugins_url( '../assets/js/frontend-image-upload.js', __FILE__ ), array( 'jquery', 'media-upload' ), NULL, true);
}

add_action( 'wp_enqueue_scripts', 'frontend_image_upload' );


add_shortcode('frontend-image-upload', function() {

    ob_start();
    ?>

    <button class="frontend-image-upload">File Open</button>

    <?php

    return ob_get_clean();
} );

File: frontend-image-upload.js

jQuery(document).ready(function($) {

    jQuery('.frontend-image-upload').click(function(event) {
        event.preventDefault();

        var uploader = wp.media({
            title: 'Select or Upload Image',
            button: {
                text: 'Choose Image'
            },
            library: {
                type: 'image'
            },
            multiple: false,
        });
        uploader.on('select', function(){

            var attachment = uploader.state().get( 'selection' ).first().toJSON();
            console.log('attachment.url: ' + attachment.url);

            // EXPECT IT OPEN THE IMAGE CROP WINDOW!!!
            // BUT, NOT WORKING NOW!!!
            uploader.setState( 'cropper' );
        });

        /*uploader.on('cropped', function(attachment){
            uploader.params.attachment = attachment;
            uploader.setting( attachment.id );
        });

        uploader.on('skippedcrop', function(selection){
            var url = selection.get('url'),
                    w = selection.get('width'),
                    h = selection.get('height');
            uploader.setImageFromURL(url, selection.id, w, h);
        });*/

        uploader.open();

    });
});

本文标签： Show image crop window on image upload