输入/更改宽度和高度值时，Cropper js的更改比率

问题描述

我正在网站上使用cropper js https://fengyuanchen.github.io/cropperjs/，但得到的结果与此网站相同：https://www.wallsauce.com/designer-wallpaper-murals/adrian-chesterman-underwater-scene-wall-mural

当用户输入宽度和高度值时，裁切器图像比率已更改。也会更改裁切机尺寸。例如用户输入的宽度：100，高度：500

然后，裁切器在y轴上选择较大的区域，而在x轴上选择较小的区域，对于相反的方向相同。再次输入相同的值（任何值）（例如1x1或100x100）时，裁剪器将显示正方形选择。我在使用croppper js时需要在我的网站上这样

但是我无法在我的网站中更改该比例和尺寸。

这是我的代码

    $(document).ready(function(){
        var image = $('.woocommerce-product-gallery__image img')
        var src = $(image).attr('data-src');
        $('<img src ="'+src+'" id="croppable_img" />').appendTo('.woocommerce-product-gallery');
        $('.crop_image_wrapper').append('<a class="button" id="crop_img">Set Mural Size</a><div id="result"></div>')
        
    });
    $(window).load( function () {
        var image = document.querySelector('#croppable_img');
        var data = document.querySelector('#data');
        var button = document.getElementById('crop_img');
        var result = document.getElementById('result');
        var flip_img = $('.wapf-input[data-field-id="5f38f8e183022"]');
        //var set_img = $('.wapf-input[data-field-id="5f390e5daafbf"]');
        var minCroppedWidth = 100;
        var minCroppedHeight = 100;
        var maxCroppedWidth = image.width;
        var maxCroppedHeight = image.height;
        //var imgratio = $(image).attr('data-large_image_width') / $(image).attr('data-large_image_height');
        var inputwidth = $('.wapf-input[data-field-id="5f364fe5f60fa"]');
        var inputheight = $('.wapf-input[data-field-id="5f36505183569"]');

        var datawidth = inputwidth.val();
        var dataheight = inputheight.val();
        $(inputwidth,inputheight).on('keyup',change_dim);

    
        function change_dim (){
            $(image).cropper('setCropBoxData',({
                width: Math.max(minCroppedWidth,Math.min(maxCroppedWidth,datawidth)),height: Math.max(minCroppedHeight,Math.min(maxCroppedHeight,dataheight)),}));
        }
        $(image).cropper({
            aspectRatio: 4/3,viewmode: 3,center: true,cropBoxMovable: true,cropBoxResizable: false,zoomable: false,minCanvaswidth: maxCroppedWidth,minCanvasHeight: maxCroppedHeight,minContainerWidth: maxCroppedWidth,minContainerHeight: maxCroppedHeight,//          data: {
//              width: (minCroppedWidth + maxCroppedWidth) / 2,//              height: (minCroppedHeight + maxCroppedHeight) / 2,//          },//          crop: function (event) {
//              var width = event.detail.width;
//              var height = event.detail.height;
//              var ratio = event.detail.oldratio;

//              if (
//                  width < minCroppedWidth
//                  || height < minCroppedHeight
//                  || width > maxCroppedWidth
//                  || height > maxCroppedHeight
//              ) {
//                  $(this).setCropBoxData({
//                      width: Math.max(minCroppedWidth,width)),//                      height: Math.max(minCroppedHeight,height)),//                  });
//              }
//              //data.textContent = JSON.stringify(cropper.getData(true));
//          },});
        
        //return a promise that resolves with a File instance
        function urltoFile(url,filename,mimeType){
            return (fetch(url)
                    .then(function(res){return res.arrayBuffer();})
                    .then(function(buf){return new File([buf],{type:mimeType});})
                   );
        }
        
        $(button).on('click',function () {
            var croppedImageDataURL = $(image).cropper('getCroppedCanvas').toDataURL("image/png"); 
            console.log(croppedImageDataURL);
            urltoFile(croppedImageDataURL,'cropped_img.png','image/png')
            .then(function(file){ 
                $(result).html('<img id="cropped_img" src="'+croppedImageDataURL+'" />');
                console.log(file);
                console.log(file.name)
                //$(set_img).val(file.name);
            });
            
        });
        
    
    
    //Usage example:
    //urltoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt','text/plain')
   // .then(function(file){ console.log(file);});
    
        $(flip_img).on('change',function () {
            console.log(this.checked)
            if(this.checked == true){
                cropper.scale(-1,1);
            }else{
                cropper.scale(1);
            }
        });
        
    });
})(jQuery)

这是我的网址：http://paperwalls.co.za/product/underwater-scenery/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）