使用PHP和Javascript/JQuery实现图片编辑功能失效，如何自定义相关操作？

你要求的裁剪、尺寸调整、旋转、对比度调节+撤销重做功能，可以基于你已经在使用的Cropper.js库扩展实现，不需要从零开发底层逻辑，实现成本很低。

完整实现代码 #

HTML结构 #

<div>
  <img id="image" src="picture.jpg">
</div>
<!-- 操作工具栏示例 -->
<div class="toolbar">
  <button id="rotateLeft">左旋90度</button>
  <button id="rotateRight">右旋90度</button>
  <button id="crop">确认裁剪</button>
  <label>对比度调节：</label>
  <input type="range" id="contrast" min="0" max="2" step="0.1" value="1">
  <button id="undo">撤销</button>
  <button id="redo">重做</button>
  <button id="export">导出图片</button>
</div>

JS逻辑 #

// 初始化Cropper实例（保留你原有的基础配置）
const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9, // 设为NaN即可开启自由裁剪比例
  viewMode: 1,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

// 撤销重做历史栈配置
let historyStack = [];
let redoStack = [];
let currentContrast = 1;

// 操作前保存当前状态到历史栈
const saveState = () => {
  const state = {
    cropData: cropper.getData(),
    contrast: currentContrast,
    imageData: cropper.getImageData()
  };
  historyStack.push(state);
  // 触发新操作后清空重做栈
  redoStack = [];
};

// 恢复指定状态
const restoreState = (state) => {
  cropper.setData(state.cropData);
  currentContrast = state.contrast;
  image.style.filter = `contrast(${currentContrast})`;
  document.getElementById('contrast').value = currentContrast;
};

// 旋转功能实现
document.getElementById('rotateLeft').addEventListener('click', () => {
  saveState();
  cropper.rotate(-90);
});
document.getElementById('rotateRight').addEventListener('click', () => {
  saveState();
  cropper.rotate(90);
});

// 裁剪确认功能
document.getElementById('crop').addEventListener('click', () => {
  saveState();
  const croppedCanvas = cropper.getCroppedCanvas();
  // 替换原图为裁剪后的内容
  cropper.replace(croppedCanvas.toDataURL());
});

// 对比度调节功能
document.getElementById('contrast').addEventListener('input', (e) => {
  currentContrast = e.target.value;
  image.style.filter = `contrast(${currentContrast})`;
});
// 调节完成后保存状态（可按需改为实时保存）
document.getElementById('contrast').addEventListener('change', () => {
  saveState();
});

// 撤销功能
document.getElementById('undo').addEventListener('click', () => {
  if (historyStack.length < 1) return;
  const currentState = historyStack.pop();
  redoStack.push(currentState);
  if (historyStack.length > 0) {
    restoreState(historyStack[historyStack.length - 1]);
  } else {
    // 回到初始状态
    cropper.reset();
    currentContrast = 1;
    image.style.filter = `contrast(1)`;
    document.getElementById('contrast').value = 1;
  }
});

// 重做功能
document.getElementById('redo').addEventListener('click', () => {
  if (redoStack.length < 1) return;
  const state = redoStack.pop();
  historyStack.push(state);
  restoreState(state);
});

// 导出最终编辑后的图片
document.getElementById('export').addEventListener('click', () => {
  const canvas = cropper.getCroppedCanvas();
  const ctx = canvas.getContext('2d');
  // 将对比度参数应用到导出的画布
  ctx.filter = `contrast(${currentContrast})`;
  ctx.drawImage(canvas, 0, 0);
  // 触发下载
  const link = document.createElement('a');
  link.download = 'edited.png';
  link.href = canvas.toDataURL();
  link.click();
});

核心功能说明 #

• 基础编辑能力：Cropper.js原生支持自由裁剪、固定比例裁剪、拖拽调整尺寸、任意角度旋转能力，可直接调用官方API扩展翻转、自定义缩放等更多操作。
• 调节功能扩展：如果需要新增亮度、饱和度、模糊等调节项，只需扩展CSS filter的参数即可，导出时同步应用到Canvas上下文就能生效。
• 撤销重做适配：历史栈的存储内容可按需扩展，比如新增翻转参数、缩放参数等，所有操作执行前先存储当前状态即可实现全操作回溯。

内容的提问来源于stack exchange，提问作者Anil Kumar