JavaScript设置ctx.filter应用CSS滤镜失效？Safari兼容问题排查

你遇到的无报错、其他画布功能正常、仅ctx.filter设置后无效果的现象，完全匹配Safari的Canvas 2D API兼容性问题：

• Canvas 2D上下文的filter属性，直到Safari 18.0版本才正式实现支持，所有更早版本的桌面端Safari、第三方App内嵌的旧版WKWebView内核，都会对该属性的赋值做静默忽略——既不会抛出兼容提示，也不会真正应用滤镜效果，和你描述的现象完全吻合。

不需要引入任何第三方依赖，两种方案都可以在全版本Safari上实现和原代码一致的对比度滤镜效果：

方案1：原生逐像素计算实现（零依赖、全版本兼容） #

这个方案使用Canvas最基础的像素读写接口手动计算对比度调整结果，从最早的Safari 3版本开始就完全支持，不存在任何兼容问题。
实现逻辑非常简单：

• 先做能力检测，判断当前环境是否支持ctx.filter属性
• 支持的话走原有逻辑直接用原生滤镜，不支持的话先绘制原图到画布，再读取全画布的像素数据，按照通用的对比度换算公式逐像素调整色值：

  对比度换算公式：调整后的单通道色值 = (原始通道值 - 128) * 对比度系数 + 128

• 调整过程中需要将最终的色值钳制在0~255的合法区间，避免出现色值溢出的怪异效果，最后把调整后的像素数据写回画布即可。

修正后的完整可运行代码：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
// 能力检测：判断当前浏览器是否支持Canvas filter属性
const supportsCanvasFilter = 'filter' in ctx;
// 与原代码保持一致的对比度参数
const CONTRAST_VALUE = 1.6;

var img;

function handleImage(e){
  var reader = new FileReader();
  reader.onload = function(event){
    img = new Image();
    img.onload = function(){
      var ratio = this.height / this.width;
      canvas.height = canvas.width * ratio;
      // 清空画布残留内容
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      if (supportsCanvasFilter) {
        // 支持原生filter的环境，沿用原有逻辑
        ctx.filter = `contrast(${CONTRAST_VALUE})`;
        ctx.drawImage(img,0,0,canvas.width, canvas.height);
      } else {
        // 不支持的环境，先绘制原图再逐像素调整对比度
        ctx.drawImage(img,0,0,canvas.width, canvas.height);
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        // 逐像素遍历，每个像素占4个存储位（R/G/B/A）
        for (let i = 0; i < data.length; i += 4) {
          // 分别对R/G/B三个通道做对比度换算，alpha通道保持不变
          data[i] = Math.min(255, Math.max(0, (data[i] - 128) * CONTRAST_VALUE + 128));
          data[i+1] = Math.min(255, Math.max(0, (data[i+1] - 128) * CONTRAST_VALUE + 128));
          data[i+2] = Math.min(255, Math.max(0, (data[i+2] - 128) * CONTRAST_VALUE + 128));
        }
        // 将调整后的像素数据写回画布
        ctx.putImageData(imageData, 0, 0);
      }
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

注意：因为你读取的是本地上传的文件转成的dataURL图片，不存在跨域导致的Canvas污染问题，getImageData接口可以正常调用，不会触发浏览器的安全限制报错。

方案2：CSS滤镜离屏映射 #

如果后续需要支持更复杂的滤镜效果（比如高斯模糊、饱和度调整、色相旋转等），可以借助Safari早在9.0版本就已支持的DOM元素CSS滤镜能力，通过离屏Canvas中转完成效果映射，不需要手动编写复杂的像素换算逻辑。

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