Option to add an image to the background

[christopherkade]

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:

• How should the positioning of the image work?
• Should the user be able to move it around?
• Should it fit the size of the banner (1000x420) automatically or be centred?

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]

Yeah please 👍

[diveresque]

@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]

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]

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]

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]

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?