LukeberryPi/phived

add ability to share tasks as image

Closed this issue · 2 comments

add a button that, when clicked, copies an image of the tasks to the clipboard.

i've been studying how to get this done, these links may be useful.

https://www.npmjs.com/package/html-to-image#toPng
https://chat.openai.com/share/2f2b6625-e84f-469e-8e4c-42e6ac0ea449

example: i have these 5 tasks. i click a button. and the image below is in my clipboard to be pasted anywhere i want.

image

I tried to implement and my approach was quite similar to #56.

I also tried to make the first task to have hover effect and the drag icon and done button appear at the screen (just like @LukeberryPi image), but I only manage to do this with a quickly appearance of those effect at screen. I didn't like the result.

I tried to clone the html before making the changes to the cloned html, but when i passed a cloned element, the "toBlob" method at html-to-image returns null and it doesn't work.

I tried a little more, but it didn't get me to any result and did not have much more time to keep trying this week.
My Next try it would be to put the html to another hidden div and try to apply the hover affect at this another "section", but work get me real hard this week.

not essential. will not be implemented. my open-source villain arc has begun.