JS图片裁剪代码固定输出400*400px，如何修改为454.138*306px？

修复步骤 #

你需要修改以下四处代码即可得到目标尺寸的裁剪结果：

1. 调整预览容器比例，保证预览和裁剪结果一致

目标裁剪尺寸的宽高比为 454.138 / 306 ≈ 1.484，需要将预览容器的比例同步修改，找到JS代码中的makeSquared函数，替换为：

function makeSquared(el) {
  var elW = el.clientWidth;
  // 高度 = 宽度 / 宽高比 ≈ 宽度 * 0.6738，和目标裁剪比例对齐
  el.style.height = (elW * 0.6738) + "px";
}

同时修改窗口 resize 事件的逻辑，同步存储容器高度值：

window.addEventListener("resize", function() {
  makeSquared($profileImgDiv);
  var sizes = getSizes($profileImgDiv);
  profileImgDivW = sizes.elW;
  // 新增存储容器高度
  profileImgDivH = sizes.elH;
});

在变量定义部分新增容器高度变量：

var currentProfileImg = "",
    profileImgDivW = getSizes($profileImgDiv).elW,
    // 新增容器高度变量
    profileImgDivH = getSizes($profileImgDiv).elH,
    NewImgNatWidth = 0,
    // 其余原有变量保持不变

2. 修改画布基础尺寸

找到HTML中的canvas标签，修改其宽高属性为目标尺寸：

<canvas id="croppedPhoto" width="454.138" height="306"></canvas>

3. 修改裁剪绘图逻辑

找到JS代码中的cropImg函数，修改画布填充和绘图参数：

function cropImg(el) {
  var natClientImgRatio = getNatSizes(el).elW / getSizes(el).elW;
  const myCanvas = document.getElementById("croppedPhoto"),
        ctx = myCanvas.getContext("2d");
  ctx.fillStyle = "#ffffff";
  // 填充范围改为目标尺寸
  ctx.fillRect(0, 0, 454.138, 306);
  ctx.drawImage(
    el,
    xCut * natClientImgRatio,
    yCut * natClientImgRatio,
    // 源裁剪范围和预览容器尺寸对齐
    profileImgDivW * natClientImgRatio,
    profileImgDivH * natClientImgRatio,
    0,
    0,
    // 输出尺寸改为目标尺寸
    454.138,
    306
  );
  // 其余原有上传、下载逻辑保持不变
}

4. 修复纵向滑块最大值计算（可选，避免裁剪错位）

找到setNewImgSizes函数中的纵向滑块赋值逻辑，替换为：

$yPosition.max = newImgHeight - profileImgDivH;

内容的提问来源于stack exchange，提问作者Sara Ree