代码之家  ›  专栏  ›  技术社区  ›  Greg

使用css或javascript的网页中的photoshop-esque混合模式?

  •  8
  • Greg  · 技术社区  · 14 年前

    我想知道是否可以使用混合模式将两个或多个图像混合在一个网页上,就像在Photoshop(覆盖、屏幕、亮光等)中找到的那样。

    我知道这种事情可以用Flash和Java来实现,但是没有插件,CSS或JavaScript是可能的吗?我已经看到一些javascript的例子,这些例子对相对较小的图像起作用,但我对在高分辨率图像上执行这项工作很感兴趣…这纯粹是为了实验目的。

    2 回复  |  直到 11 年前
        1
  •  6
  •   groovecoder mkluwe    11 年前

    使用canvas元素,您可以很容易地得到覆盖和点亮。在将每个位图呈现到画布之前,您需要指定哪些设置。

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

        2
  •  5
  •   Phrogz    14 年前

    我创建了一个独立的、轻量级的开源库,用于从一个HTML画布上下文到另一个HTML画布上下文执行Photoshop样式的混合模式: context-blender . 以下是示例用法:

    // Might be an 'offscreen' canvas
    var over  = someCanvas.getContext('2d');
    var under = anotherCanvas.getContext('2d');
    
    over.blendOnto( under, 'screen', {destX:30,destY:15} );
    

    README 有关更多信息,包括当前版本中支持的混合模式。