开发者

Is there a way to achieve Photoshop-like multiply, difference, etc layer effects with Canvas?

开发者 https://www.devze.com 2023-01-10 12:21 出处:网络
I am looking for a way to achieve Photoshop-like layer effects such as multiply and开发者_StackOverflow difference (and screen) for Canvas + JavaScript.

I am looking for a way to achieve Photoshop-like layer effects such as multiply and开发者_StackOverflow difference (and screen) for Canvas + JavaScript.

Also, is there a blur effect for Canvas?


(Assuming at least some familiarity with image processing here. If that's not the case, you may want to refine your question or ask another one with a narrower scope.)

Those layer effects are not that hard to achieve. Wikipedia has descriptions of how they work as well as a few pointers. For multiply for example you multiply the values per channel and per pixel and divide the result by 255.

As for blur, that's usually done with a simple convolution. See for example, Wikipedia again. Basically what you do when convolving a signal is to look at the neighborhood of a single pixel with varying weights (for a Gaussian blur those weights form the shape of a normal distribution in 2D). A simply box blur could use the matrix

1 1 1
1 1 1
1 1 1

which would just blur each pixel with its directly surrounding ones. Perform this three times on the image and you get a good approximation of a Gaussian blur as well.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号