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]);
},