Shadow Offset In Website Design Images

1/ Overview

The shadow offset that we need to detect here, mostly will be box-shadow, a
property of CSS (Cascading Style Sheets) which is used in website markup along
with HTML.

To make it clearer, please take a look at the following examples:

The horizontal offset of the shadow (X offset), positive means the shadow will be on
the right of the box, a negative offset will put the shadow on the left of the box.
The vertical offset of the shadow (Y offset), a negative one means the box-shadow
will be above the box, a positive one means the shadow will be below the box.

For other configurations of box-shadow:

● The blur radius (optional), if set to 0 the shadow will be sharp, the higher the
number, the more blurred it will be.
● The spread radius (optional), positive values increase the size of the shadow,
negative values decrease the size. Default is 0 (the shadow is the same size
as blur).
2/ Scope

We want to detect the X and Y offset of the component in a image:

3/ Post research approach

a. Use edge detector to draw border lines around component and its shadow:
b. Draw all the detected contours (because the shadow is a bit blurry and does
not have one fill color like component so it will create noise contours, which
we will deal with later)

c. Draw bounding box to wrap around all the detected contours (including noise
contours)

d. Merge nearby contours to remove noise bounding boxes and keep the true
ones that wrap up the shadow and component we need.
 e. Apply object detection model using Faster-RCNN on Detectron2 framework to
detect the bounding box of the component:

f. Calculate the offset:

4/ Challenges

- The input image should contain one components since larger ones with dense
detail will not be a good idea:
Because there are too much noises from other components, which will affect
the merging process:
→ Suggest solution: Using object detection model to extract important components
that we only want to base on to get the shadow such as: button, block, input.

However, it is recommended for those in charge of this project to research a model

that base on labeling ground truth of blurry shadow in order to predict the area of the
shadow since most of the paper in the reference section had gone through and
prefer better than classical method such as contour above.

5/ References

In case those in charge of the project only want to improve the object detection
model with contour scripts, please contact the teacher and he will connect you to
corresponding collaborators.
For papers that already involved in problems similar to this project (most of them are
natural shadow in real life image), you can take a look here:

Shadow Detection on SBU:

https://paperswithcode.com/sota/shadow-detection-on-sbu

ALGORITHM FOR SHADOW DETECTION IN REAL COLOUR IMAGES:

https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.301.7048&rep=rep1&type
=pdf

A Survey on Shadow Detection Techniques in a Single Image:

https://www.researchgate.net/publication/323568776_A_Survey_on_Shadow_Detect
ion_Techniques_in_a_Single_Image

Automatic Shadow Detection and Removal from a Single Image:

https://salman-h-khan.github.io/papers/TPAMI15.pdf

Shadow Detection and Removal Using Tri-Class Based Thresholding and Shadow
Matting Technique:
https://www.sciencedirect.com/science/article/pii/S2212017316302377

Shadow Elimination Algorithm Using Color and Texture Features:

https://www.hindawi.com/journals/cin/2020/2075781/