vue系列uni

layui选取图片时截取比列动态

2023-09-26  本文已影响0人  litielongxx

layui一般用作后台管理系统。
croppers多为选择图片后裁剪,一般mark固定,动态则需要加入choose。


image.png

改动地方:


image.png
删除mark替代,choose代码
choose: function (options) {
            // 当选择图片时            var fileInput = options.file;
            var image = new Image();
            
            image.onload = function () {
                // 图片加载完成后获取实际宽度和高度
                var actualWidth = this.width;
                var actualHeight = this.height;
                
                // 计算截取比例,例如:宽度/高度
                var dynamicAspectRatio = actualWidth / actualHeight;

                // 更新截取比例
                options.mark = dynamicAspectRatio;

                // 重新渲染裁剪组件以更新截取比例                
                 croppers.reload(options);
            };

            // 读取选定的图片文件         
       var fileReader = new FileReader();
            fileReader.onload = function (e) {
                image.src = e.target.result;
            };
            fileReader.readAsDataURL(fileInput.files[0]);
        },
上一篇下一篇

猜你喜欢

热点阅读