PHP图像处理。乌贼墨,饱和,烤面包机过滤器完全一样的CSS

PHP图像处理。乌贼墨,饱和,烤面包机过滤器完全一样的CSS,php,css,image-processing,imagemagick,Php,Css,Image Processing,Imagemagick,我需要创建一个脚本,它允许用户对他们的图像应用一些类似instagram的过滤器。首先,它应该在浏览器中完成。最简单的方法当然是css3过滤器。 然后图像应该上传到服务器上,并且必须使用和浏览器中看到的过滤器完全相同的过滤器保存图像 现在问题开始了。我可以用ImageMagick或ImageGD库做一些深褐色、饱和的烤面包机效果,但结果和我们在浏览器中看到的图像不同。 ImageMagick的“Sepia”与我们在使用css时看到的“Sepia”不同。更糟糕的是:用户可能会选择过滤器组合(乌贼墨

我需要创建一个脚本,它允许用户对他们的图像应用一些类似instagram的过滤器。首先,它应该在浏览器中完成。最简单的方法当然是css3过滤器。 然后图像应该上传到服务器上,并且必须使用和浏览器中看到的过滤器完全相同的过滤器保存图像

现在问题开始了。我可以用ImageMagick或ImageGD库做一些深褐色、饱和的烤面包机效果,但结果和我们在浏览器中看到的图像不同。 ImageMagick的“Sepia”与我们在使用css时看到的“Sepia”不同。更糟糕的是:用户可能会选择过滤器组合(乌贼墨、饱和、加烤面包机、加对比度等)。 我几乎不知道如何重现它

我现在唯一的解决方案是在画布元素上不使用css实现“浏览器内”效果(因此,我可以轻松地在浏览器和服务器上使用相同的算法)。但我觉得这很难看,我想留在css3


css过滤器内部架构有什么好的描述吗?

我认为css不是最好的方式。虽然您可以使用像CamanJS()这样的插件,它使用HTML5画布,但提供了大量的功能和选项来制作您自己的过滤器或使用现有的过滤器

但是,如果您仍然想使用CSS。 您可以在这里查看这个CSS过滤器模块草案,它将准确地解释您正在寻找的内部架构。

我在使用php编写过滤css和过滤。我使用了GD和Imagemagick,可以看出Imagemagick更强大、更兼容

首先,这里是css中的混合模式效果列表,使用Imagemagick,这些效果在css和php中完全相同:

  • \Imagick::复合_默认值:正常值
  • \Imagick::复合乘法:乘法
  • \Imagick::复合屏幕:屏幕
  • \Imagick::合成颜色变暗:变暗
  • \Imagick::复合_差异:差异
  • \Imagick::复合排除:排除
对于其余部分,它们在CSS和PHP中有不同的数学公式:

  • \Imagick::复合覆盖层:覆盖层(非常不同)
  • \Imagick::复合材料加亮:加亮(我有点不同)
  • \Imagick::COMPOSITE_COLORBURN:color burn(我有一点点)
  • \Imagick::复合硬光:硬光(非常不同)
  • \Imagick::复合_柔光:柔光(一点点)
  • \图像:合成色调:色调(完全不同!)
  • \Imagick::复合_饱和:饱和(全部)
  • \Imagick::复合着色:颜色(全部)
  • \Imagick::复合发光:亮度(全部)
好了,现在来看看css过滤效果:

  • 如果你想做亮度饱和色调
    $pic->调制图像(100,1200)
  • 灰度
    $pic->setImageType(\Imagick::IMGTYPE\u灰度)
  • sepia(完全不同):
    $pic_ori->sepiatoneimage(80)
    -反转
    $pic->negateImage(假、\Imagick::CHANNEL\u ALL)
  • 对比度:假设您的图像是$pic:
$quanta=$pic->getQuantumRange();
$pic->sigmoidalControlImage(true,value,$quanta[“quantumRangeLong”]*value,\Imagick::CHANNELL\u ALL)