How Can I Save Images from a Canvas with Applied CSS Filters?

Saving Images from Canvas with CSS Filters

You've applied CSS filters to an image, but when you try to save it, the original image is preserved without any effects. To resolve this, there are two main approaches:

1. Utilize Context Filter Property (Firefox Only)

Firefox supports the context filter property, which allows you to directly apply CSS filters to the canvas context:

var ctx = myCanvas.getContext('2d');
ctx.filter = "grayscale(50%) blur(5px)";
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);

This applies the filter and then saves the canvas as an image.

2. Apply Filters Manually (All Browsers)

Although the context filter property is not widely supported, you can manually apply filters to the canvas using pixel-level operations. This requires using the Filter Effects Module Level 1 and SVG Filters and Color Matrix specifications:

// Calculate filter matrix for grayscale
var greyMatrix = [
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0, 0, 0, 1, 0
];

// Apply grayscale filter to canvas
var imgData = ctx.getImageData(0, 0, myCanvas.width, myCanvas.height);
for (var i = 0; i < imgData.data.length; i += 4) {
  var r = imgData.data[i];
  var g = imgData.data[i + 1];
  var b = imgData.data[i + 2];
  imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] = (r * greyMatrix[0] + g * greyMatrix[1] + b * greyMatrix[2]);
}
ctx.putImageData(imgData, 0, 0);

You would repeat this process for each filter you want to apply.

Remember, these approaches either rely on a Firefox-specific property or require manual filter manipulation. If wide browser support is crucial, consider developing a backend solution.

The above is the detailed content of How Can I Save Images from a Canvas with Applied CSS Filters?. For more information, please follow other related articles on the PHP Chinese website!