You don't even need to log in, so have a look and enjoy freely!
Composition
It consists of the following
Front . Nuxt.js+tailwind css
Backend.... .Python
APIization.... AWS
Hosting.... Vercel
The same configuration has been used for almost all of the following applications I've released so far.
The way to make API, you can see this article.
How to add effects
For the background effect, the outline is extracted, cropped, and then combined with the image.
# Add a background effect
def back_filter(src, manga, effect, th):
# Grayscale conversion
img = cv2.bitwise_not(src)
img_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
effect = cv2.cvtColor(effect, cv2.COLOR_BGR2GRAY)
# Resize the screen tone image to the same size as the input image.
effect = cv2.resize(effect,(img_gray.shape[1],img_gray.shape[0]))
# binarization
ret, img_binary = cv2.threshold(img_gray, th, 255,cv2.THRESH_BINARY)
# Contour extraction
contours, _ = cv2.findContours(img_binary, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
# Get the contour with the largest area
contour = max(contours, key=lambda x: cv2.contourArea(x))
mask = np.zeros_like(img_binary)
cv2.drawContours(mask, [contour], -1, color=255, thickness=-1)
effect = np.where(mask == 0, effect, manga)
# Combine tri-level image and contour image
return effect
The effect on top of the image is much simpler, it's just a composite.
# front effect
def front_filter(manga, effect):
effect = cv2.resize(effect,(manga.shape[1], manga.shape[0]))
# Mask Image Generator
mask = effect[:,:,3]
# Grayscale the effect
effect = cv2.cvtColor(effect, cv2.COLOR_BGR2GRAY)
# Combine tri-level image and contour image
manga = np.where(mask == 0, manga, effect)
return manga
For the above configuration, the background effect is saved as jpg, and the effect on the image as png, transparent background image.
That's it!
Thanks for reading.
This is some kind of a joking app, but I am very happy if you enjoy it!
🍎🍎🍎🍎🍎🍎
Please send me a message if you need.
yuiko.dev@gmail.com
https://twitter.com/yui_active
🍎🍎🍎🍎🍎🍎