javascript - 如何根据cropper js中的图像设置初始缩放幻灯片值

Question

jQuery(document).ready(function() {
var src,
range_ratio_value;

jQuery( "#zoom-slider" ).slider();

jQuery('#photo').change(function() {
var file_data = jQuery('#photo').prop('files')[0];
var cropper_image = jQuery('.cropper_image');
var reader = new FileReader();
jQuery(reader).load(function(e) {
    src = e.target.result;
    cropper_image.attr('src', src);
});
reader.readAsDataURL(this.files[0]);

setTimeout(function() {
    var cropper_url = cropper_image[0];
    cropper_image.attr('src', src);
    var new_image = cropper_image[0];
    var cropper = new Cropper( new_image, {
        aspectRatio: 1,
        viewMode: 0,                // zoom as free
        guides: false,              // hide guid lines
        dragMode: 'move',           // dragging mode of cropper
        movable: true,              // enable image move
        cropBoxMovable: false,      // crop box move disable
        cropBoxResizable: false,    // crop box resize disable
        minCropBoxWidth: 300,
        minCropBoxHeight: 300,
        maxCropBoxWidth: 300,
        maxCropBoxHeight: 300,
        zoomOnWheel: false,
        ready: function(e) {
            var cropper_slide = this.cropper;
            range_ratio_value = jQuery('#range_ratio_value');

            imageData = cropper.getImageData();
            containerData = cropper.getContainerData();
            cropBoxData = cropper.getCropBoxData();
            // var minSliderZoom = imageData.width / imageData.naturalWidth;
            var minSliderZoom = (imageData.naturalWidth - imageData.width) / imageData.width;

            var aspectRatio = cropBoxData.width / cropBoxData.height;
            console.log(aspectRatio);
            // cropper_slide.zoomTo(0.90);

            jQuery(".cr-slider-wrap").show();
            // jQuery("#zoom-slider").slider("option", "max", cropBoxData.width + 100);
            // jQuery("#zoom-slider").slider("option", "min", cropBoxData.width);
            jQuery("#zoom-slider").slider("value", 0);
            range_ratio_value.val('0');
        },
        zoom: function(e){
            // console.log(e);
            // var ratio = Math.round(e.ratio * 1000)/10;
            // $dataZoom.text(ratio);
        }
    });

    //cropper UI sliders
    jQuery('#zoom-slider').slider({
        min: 0.1,
        max: 4,
        value: 0,
        step: 0.01,
        slide: function( event, ui ) {
            if (cropper){
                imageData = cropper.getImageData();
                var crop_box = cropper.getCropBoxData();
                var currentValue = jQuery("#zoom-slider").slider("value");
                console.log(range_ratio_value.val(), ui.value, imageData, crop_box);

                // if ((imageData.width < crop_box.width || imageData.height < crop_box.height) && (Number(range_ratio_value.val()) > ui.value)) {
                //     console.log('set min level');
                //     return false;
                // } else {
                    cropper.zoomTo(ui.value);
                    slide_width = jQuery('#zoom-slider .ui-slider-handle');
                    console.log(slide_width);
                    if(jQuery('.slide_fill_color').length > 0) {
                        // return false;
                        jQuery('.slide_fill_color').css({'width': slide_width + '%'});
                    }
                    else {
                        jQuery('#zoom-slider').append('<div class="slide_fill_color"></div>');
                        jQuery('.slide_fill_color').css({'width': slide_width + 'px'});
                    }
                // }
                range_ratio_value.val(ui.value);
            }
        }
    });
}, 1000);
});
});

.cropper_headshot_box {
                width: 500px;
                height: 500px;
            }
            img {
                max-width: 100%;
            }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.0.0-rc.1/cropper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.0.0-rc.1/cropper.min.js"></script>
<form>
    <input type="file" name="photo" id="photo" class="file_input" accept="image/*"/>
</form>

<div class="cropper_headshot_box" id="cropper_headshot">
    <img class="cropper_image" src=""/>

    <div>
        <input type="hidden" id="range_ratio_value" value=""/>
        <div id="zoom-slider"></div>
        <div class="row">
            <div class="slider-val-area">
                <span id="min-zoom-val" class="pull-left">0</span>
            </div>
            <div class="slider-val-area">
                <span id="max-zoom-val" class="pull-right">1</span>
            </div>
        </div>
    </div>
</div>

当我滑动裁剪器 js 图像时，图像幻灯片以初始值开始。最初，图像设置为适合画布容器。

任何人都可以帮助将滑块值设置为基于图像。因为，当我滑动时，图像以初始缩放值开始。但是，我需要放大/缩小图像显示位置。

标签： javascripthtmljquerycss