本文介绍了如何将context.filter仅应用于画布上的图像?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在制作一个照片编辑器,您可以在其中上传图像,添加滤镜,放置文字,用铅笔绘图等.问题是我只希望在图像上使用的滤镜适用于画布上的所有内容..我不希望它适用于用铅笔绘制的文字和画出的线条.甚至在香草JS中还是可能的,还是我必须使用一个库?

I am making a photo editor where you can upload an image, add filters, put on text, draw with a pencil, etc. The problem is that the filters that I want on just the image, applies to everything on the canvas. I don't want it to apply to the text and the drawn lines with a pencil. Is this even possible in vanilla JS or would I have to use a library?

当文本颜色实际上设置为红色并且应用了灰度时,这就是我现在的样子:

This is how I it looks right now when the text color is actually set to red and I applied grayscale:

这就是我希望它在应用红色文本和灰度的情况下看起来的样子:

This is how I want it to look with red text and grayscale applied:

其他所有滤镜也都会发生这种情况,但是灰度是最明显的滤镜,因此我以它为例.我没有包含代码,因为我主要是问这是否可能.

This happens with all of the other filters as well, but gray scale was the most obvious one, so I used that as an example. I did not include code as I am mainly asking if this is even possible.

推荐答案

是的,可以在您执行以下操作后,只需将 ctx.filter 设置回"none" 已经绘制了图像.

Yes it's possible, just set the ctx.filter back to "none" after you've drawn the image.

这篇关于如何将context.filter仅应用于画布上的图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 13:19
查看更多