search

christopherkade / banner-generator

:speech_balloon: Easily generate banners for your articles on dev.to
https://christopherkade.com/banner-generator/
MIT License
63 stars 9 forks source link

Option to add an image to the background #5

Open christopherkade opened 5 years ago

christopherkade commented 5 years ago

Users should be able to select an image from their computer and have it displayed as the background of the banner.

Another option would be to integrate something like Unsplash in order to retrieve free images directly through the app.

A few questions are important:

There is a problem with html2canvas not being able to generate a canvas based on an image though, so that would mean either changing the way we generate the canvas or dropping the idea.

thomasbnt commented 5 years ago

Yeah please :+1:

diveresque commented 5 years ago

@christopherkade I could take a look at this one as well. Im not sure how easy it is to do, especially to create something moveable, but I could try and do the initial work.

christopherkade commented 5 years ago

Hey @diveresque, of course, go ahead and have fun.

I'm afraid html2canvas can't render images, which poses a big problem, but we could find work arounds & solutions together. If you have any questions please let me know.

diveresque commented 5 years ago

Great :) will see how I go. A few questions:

  1. html2canvas - i tried hardcoding in an image just using background-image in the div, and downloading the banner and it seemed to work - unless im missing something?
  2. uploading images in React is new to me, just after a bit of research one option for uploading the image could be react-dropzone - did you have anything else in mind? Thanks!
christopherkade commented 5 years ago

As you can see here, background-image isn't supported. So I'd be curious to see if you could make it work.

I don't have any experience with image uploading with React sadly, react-dropzone does seem very popular. It seems like a good choice 😄

diveresque commented 5 years ago

Hi @christopherkade sorry it took me a while to get to this.. I started and have a basic dropzone set up, but just want to check im on the right track for the next part - thinking to use FileReader (Im not that familiar with it for this kind of usage) for the uploaded image and then try to display it in the Output, using something similar to what you have for the other inputs (color, title). Thoughts?