网页图片编辑器应用滤镜后如何下载修改后的图片？JS canvas下载问题

DevOps 小满

2026-9-29

问题原因

你当前的滤镜、旋转、翻转效果全部是通过CSS样式施加在canvas元素上的，CSS只会修改元素在页面上的显示外观，不会改动canvas内部存储的像素数据。调用`canvas.toDataURL()`导出图片时，读取的是canvas内部原始像素数据，所以始终拿到未编辑的原图。

修复步骤

补全options中缺失的滤镜参数，避免运行时报错
重写redraw函数，删除所有修改CSS样式的逻辑，改为直接在canvas绘图上下文中应用变换、滤镜参数，重新绘制原始图片
处理变换后图片的居中显示问题，避免内容偏移

修改后可用代码

JS部分调整

// 首先补全options所有用到的属性，避免变量未定义报错
const options = {
  sepia: 0,
  rotation: 0,
  scale: 1,
  grayscale: 0,
  brightness: 1,
  contrast: 1,
  opacity: 1,
  invertVal: 0
};

// 完全重写redraw函数，替换原有CSS修改逻辑
function redraw() {
  // 清空当前画布内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 保存当前绘图上下文状态
  ctx.save();
  
  // 应用所有滤镜参数
  ctx.filter = `sepia(${options.sepia}) grayscale(${options.grayscale}) brightness(${options.brightness}) contrast(${options.contrast}) opacity(${options.opacity}) invert(${options.invertVal}%)`;
  
  // 将绘图原点移到画布中心，方便旋转、翻转变换
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  ctx.translate(centerX, centerY);
  // 应用旋转角度
  ctx.rotate(options.rotation * Math.PI / 180);
  // 应用水平翻转
  ctx.scale(options.scale, 1);
  
  // 绘制图片，调整偏移量保证图片居中
  ctx.drawImage(img, -img.width/2, -img.height/2, img.width, img.height);
  
  // 恢复绘图上下文原始状态
  ctx.restore();
}