Product custom image option with preview

Question

I am building a system where a customer can upload a image to a product and that image will then be printed onto the product. I have found out how to do this using a field custom option easily enough.

However we would like to be able to preview a example of what the product will look like on the product page. This would most likely be done using image overlays or masks on top of the customers image. To do this however I would need the image to be uploaded before the product is added to the cart.

I have looked for modules that let you preview your image before adding to cart but have not found anything.

I think the only other option would be to duplicate the file upload custom option and build in functions like this that let you upload as preview then add to cart. However this might be a time intensive option and we have not confirmed the system will be built in magento yet so I cannot dive into this option too deeply yet. I am wondering if there are any other options for building a system like this or modules I may have missed that could do this.

Answer 1

There are a couple of extension that can do this. Google on "Magento product personalization" and you should run into them. However, in my opinion none of them provide a good solution since UI is not optimal and there are no checks for file type etc. The main issue is. Any JPEG a customer will upload is likely to be just fine for previewing in web but will to low quality to print on a product unless it's gonna be really small.

I've made something like this once which used a html5 uploader and a canvas element to preview it on the product which worked pretty ok but it was a lot of work and it surely has it's limits.

Not knowing the case I would suggest allowing for customers to upload EPS, PDF and other vector formats and offering a service that sends a sample as your customer will get a better result. (but thats my opinion)