Html HTML5 中是否可以使用类似 Photoshop 的混合模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4276859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are photoshop-like blend modes possible in HTML5?
提问by Ernests Karlsons
I want to put a red rectangular <div>element over my webpage so that it would look not only transparent, but also like blended in Photoshop's Multiply mode.
我想<div>在我的网页上放置一个红色矩形元素，这样它不仅看起来透明，而且看起来像在 Photoshop 的乘法模式中混合。
The <div>would have position: fixed, so the content below it would change quickly.
该<div>会拥有position: fixed，所以它下面的内容会迅速改变。
Is that possible with any HTML5 / CSS3 / canvas / SVG trick?
任何 HTML5/CSS3/canvas/SVG 技巧都可以做到吗？
采纳答案by Phrogz
I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:
我创建了一个单独的、轻量级的、开源的库，用于从一个 HTML Canvas 上下文到另一个执行 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} );
See the READMEfor more information, including the currently-supported blend modes.
有关更多信息，包括当前支持的混合模式，请参阅自述文件。
You could use this to perform multiply from one canvas to another, but not over standard HTML elements.
您可以使用它来执行从一个画布到另一个画布的乘法运算，但不能在标准 HTML 元素上执行。
回答by Lea Verou
No (not natively) but it's coming soon: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/
不（不是本地的），但即将推出：http: //blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/
回答by Georgii Ivankin
You can also look at this demo: http://media.chikuyonok.ru/canvas-blending/to see how to do this with canvas.
您还可以查看此演示：http: //media.chikuyonok.ru/canvas-blending/以了解如何使用画布执行此操作。
Check the source for blending modes' formulae and how to apply them (formulae are much more readable than in pixastic or context-blender).
检查混合模式公式的来源以及如何应用它们（公式比 pixastic 或 context-blender 更具可读性）。
回答by Irae Carvalho
I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.
我也对这样做很感兴趣。我为视觉设计师编写的许多布局都可以使用它。除了该线程中的其他帖子外，还有一种方法可以做到这一点，目前仅在 Firefox 4 中，不使用 OpenGl 或 Canvas。这是通过使用 SVG 过滤器。显然它也在来自 Webkit 和 Chrome 的睡衣上，但我还看不到任何工作。
Here are some demos and explanations:
下面是一些演示和解释：
- (demo) http://people.mozilla.org/~roc/filter.xhtml
- https://developer.mozilla.org/en/applying_svg_effects_to_html_content
- https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
- http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html
- （演示）http://people.mozilla.org/~roc/filter.xhtml
- https://developer.mozilla.org/en/applying_svg_effects_to_html_content
- https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
- http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html
IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.
恕我直言，接近混合模式的任何东西现在都很难实现。很难找到关于feConvolveMatrix、feSpecularLighting、 或 的任何参考资料feColorMatrix，而且我无法弄清楚这些示例。他们可以工作，但我不知道如何。
I wish something like EffectGames suggested:
我希望像EffectGames 这样的建议：
div.sprite {
position: absolute;
z-index: 2;
composite: add;
}
This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.
这将是一种更好的方法。也许那里的一些精通数学的忍者可以让我们成为这样做的库。
EDIT:There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html- But I also don't know if this will be possible to use in HTML-DOM elements.
编辑：有一个更简单的 SVG 规范可以完全混合模式。但是我测试过的浏览器都没有这个功能（FF4、IE9、Opera11、Webkit Nightly）：http: //dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html- 但我也不知道这将可以在 HTML-DOM 元素中使用。
回答by Kyle
This isn't HTML5, but it's as close as I can find for what you're asking.
这不是 HTML5，但它尽可能接近您的要求。
Javascript blending modes(OpenGL).
Javascript 混合模式(OpenGL)。
I don't think "blend modes" like Photoshop could be emulated with just pure HTML, unless the language took a sharp turn in another direction. But it would be great to see some easier way of doing this.
我不认为像 Photoshop 这样的“混合模式”可以只用纯 HTML 来模拟，除非语言在另一个方向上发生了急剧的转变。但是很高兴看到一些更简单的方法来做到这一点。
回答by Luis
This is the closest I have seen, and yes, all assets have to be in the canvas. Note that Internet Explorer starts supporting canvas in version 9 which is not out yet, so if you have to support IE<9 you'll have to use a workaround.
这是我见过的最接近的，是的，所有资产都必须在画布中。请注意，Internet Explorer 在尚未发布的版本 9 中开始支持画布，因此如果您必须支持 IE<9，则必须使用一种解决方法。
回答by Ric
It's landed in Chrome Canary so should reach release soon. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/
它已登陆 Chrome Canary，因此应该很快就会发布。http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/
回答by Antonio Brandao
You can already use it with just simple CSS (no Canvas). Example:
您已经可以通过简单的 CSS（没有 Canvas）使用它。例子：
mix-blend-mode: 'multiply'
Internet Explorer may not support it, but the other browsers do.
Internet Explorer 可能不支持，但其他浏览器支持。
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
回答by Jonathon Hill
Depending on the images involved and the exact effect you are after, you might be able to do some creative layering of images and CSS gradients to achieve the desired affect:
根据所涉及的图像和您所追求的确切效果，您可以对图像和 CSS 渐变进行一些创造性的分层以实现所需的效果：
http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/
http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/
回答by rezoner
I have implemented most popular blend modes known from gimp/photoshop using canvas in http://canvasquery.com/however it is not suitable for relatime.
我已经使用http://canvasquery.com/中的画布实现了 gimp/photoshop 中已知的最流行的混合模式，但是它不适合 relatime。
This will change with introduction of native blend modes in canvas
这将随着在画布中引入本机混合模式而改变
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable
