Memeit.LOL Development #4
App Overview: You can use Memeit.LOL to create original memes and post them to the Steem Blockchain
New Features
- What feature(s) did you add?
Today I added support for stickers to our memeit generator.
First I removed and made a new JavaScript file for the sole purpose of the meme generator module. In here I used many different functions for current and future features, such as sticker support, exporting, deleting textarea and stickers, default textareas, and soon to be drafting.
- How I did this?
To add support for sticks I used fabric.js' support for loading images into the canvas. Though I had to scale down to 50px because when I first tried this I was adding a tongue. The tongue took over the whole image (not what I wanted). Another thing was using crossOrigin. Over this edit I learned HTML canvases are called tainted when not using crossOrigin 'anonymous'. If they are tainted they then cannot be exported to an image.
I also added a keyup event listener. Basically when someone clicks the del key on a keyboard while a sticker or textarea is selected it will be deleted.
For Users
On the editor you will now see two rows above the canvas filled with images. The top one is for templates, while the bottom is for stickers. You many notice the text box to change the text is missing. That's because you can double click on any textbox and type right in there. Also as stated above, you can type the del key on your keyboard to delete stickers and textareas that are selected.
Thanks from @kennybll, and @memeit.lol team.
Great stickers are in and kicking
Good job @kennybll
The stickers are nice additions. Overall it is shaping to be a real good platform for meme lovers.
But there is one thing that I would like to say about the latest development. Maybe we can have the meme templates list to appear in a line of 5 or more since it takes a long time (for me at least) to scroll in a single pile. But aside from that I am quite satisfied with the update, keep up the good work guys! Cheers!
Thanks for the contribution!
Looking good! It would be nice if you added a few comments to your code, though.
Click here to see how your contribution was evaluated.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Hey @kennybll
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!