Hey there, let's work through this iOS canvas filter issue together! You've got a solid setup that works great on desktop, but iOS is refusing to carry over those CSS filters when you save the image—let's figure out why and fix it.

The Core Problem #

Your fileApply function correctly copies the CSS filter from your preview canvas to the save canvas, and desktop browsers capture that filtered output perfectly. But iOS Safari has quirks with how it handles canvas context filters and toDataURL(): sometimes it doesn't fully render the filter before generating the data URL, leading to a plain, unfiltered image in the new tab.

Step-by-Step Solutions #

1. Wait for Full Canvas Render Before Capturing the Image

iOS might need an extra moment to finish applying the filter and rendering the canvas. Use requestAnimationFrame to wait for the next browser render cycle before calling toDataURL():

function fileSave() {
  var canvas = document.getElementById('cSave');
  let format, quality, name;

  if (document.getElementById("png").checked) {
    format = "image/png";
    quality = null;
    name = "new_image.png";
  } else if (document.getElementById("jpg").checked) {
    format = "image/jpeg";
    quality = Number(document.getElementById("quality").value) / 100;
    name = "new_image.jpg";
  }

  if (!isIOS()) {
    // Keep your existing desktop download logic
    canvas.toBlob(function(blob) {
      const anchor = document.createElement('a');
      const url = URL.createObjectURL(blob);
      anchor.href = url;
      anchor.download = name;
      document.body.appendChild(anchor);
      anchor.click();
      document.body.removeChild(anchor);
      URL.revokeObjectURL(url);
    }, format, quality);
  } else {
    // Wait for canvas to fully render before generating data URL
    requestAnimationFrame(() => {
      // Explicitly pass format/quality to avoid iOS defaults
      var iString = canvas.toDataURL(format, quality);
      document.getElementById("iOS").innerHTML = `<a href="${iString}" target="_blank">click me</a>`;
    });
  }
}

2. Verify the Filtered Canvas is Actually Rendered

First, confirm that your cSave canvas is displaying the filtered image correctly on iOS. Add a quick debug step to show both canvases temporarily:

function fileApply() {
  var cP = document.getElementById("cPreview");
  var cntxCP = cP.getContext("2d");
  var cS = document.getElementById("cSave");
  var cntxCS = cS.getContext("2d");

  var cssFilter = getComputedStyle(cP).filter;
  
  cS.width = cP.width;
  cS.height = cP.height;
  cntxCS.filter = cssFilter;
  cntxCS.drawImage(cP, 0, 0);

  // Debug: Show both canvases to check if filter is applied
  cP.style.display = "block";
  cS.style.display = "block";
  cS.style.marginLeft = "20px"; // Add spacing to see side-by-side
}

If cSave shows the filtered image on iOS, the issue is definitely with toDataURL() capturing the canvas state. If not, try re-drawing the original image source (not the preview canvas) directly onto cSave with the filter applied.

3. Use toBlob() for iOS (Modern Versions)

Recent iOS Safari versions support canvas.toBlob(), which is more reliable than toDataURL() for capturing canvas state. Try unifying your code to use blob logic for both desktop and iOS:

function fileSave() {
  var canvas = document.getElementById('cSave');
  let format, quality, name;

  if (document.getElementById("png").checked) {
    format = "image/png";
    quality = null;
    name = "new_image.png";
  } else if (document.getElementById("jpg").checked) {
    format = "image/jpeg";
    quality = Number(document.getElementById("quality").value) / 100;
    name = "new_image.jpg";
  }

  // Prioritize toBlob for better reliability
  if (canvas.toBlob) {
    canvas.toBlob(function(blob) {
      const url = URL.createObjectURL(blob);
      if (isIOS()) {
        // For iOS, create a new tab link
        document.getElementById("iOS").innerHTML = `<a href="${url}" target="_blank">click me</a>`;
        // Clean up URL after a delay (iOS might need time to load it)
        setTimeout(() => URL.revokeObjectURL(url), 10000);
      } else {
        // Desktop download flow
        const anchor = document.createElement('a');
        anchor.href = url;
        anchor.download = name;
        document.body.appendChild(anchor);
        anchor.click();
        document.body.removeChild(anchor);
        URL.revokeObjectURL(url);
      }
    }, format, quality);
  } else {
    // Fallback to toDataURL for older iOS versions
    requestAnimationFrame(() => {
      var iString = canvas.toDataURL(format, quality);
      document.getElementById("iOS").innerHTML = `<a href="${iString}" target="_blank">click me</a>`;
    });
  }
}

Key Tips #

• Always pass format and quality explicitly to toDataURL() or toBlob()—this avoids iOS using default settings that might discard filter data.
• requestAnimationFrame ensures the browser has finished all canvas rendering before you capture the image.
• toBlob() is more efficient for larger images and handles canvas state more consistently across modern browsers.

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