Is there a way to achieve Photoshop-like multiply, difference, etc layer effects with Canvas?
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.
精彩评论