0

I'm creating a Facebook app using Rails and hosted on Heroku and I'm having a bit of trouble finding the ideal way to solve a problem. I want the user to be able to move their photos around on the screen, position them, and then download that as either a PDF or a PNG file to be emailed or printed. I have the app getting the user's facebook photos and they can drag them on to a HTML5 Canvas element to position them. Taking this canvas, however, and converting it into something printable is where I'm hitting a dead end.

Basically I have a few ideas I have tried:

Convert the Canvas to a PNG using toDataURL() - Would work perfectly but since the photos are external, the canvas is "dirty" and will throw up a security issue. I've thought about trying to copy the pixels of each image to a pixel array but I've heard this may not work either due to security issues. Since the app is dealing with people's facebook images I really don't want to store them on the app's server.

Use PDFKit/wkhtmltopdf to create a PDF using Rails - I've tried this, but since the app is a Sinatra app (I think), it's confusing me a lot. It's throwing errors with the to_pdf call saying 'Command Failed'. I've tried adding a config.middleware.use line but I'm not 100% sure where to put it and everywhere seems to be failing saying "config" is an undefined variable. Also installing wkhtmltopdf seems to fail on Heroku once I test it outside localhost.

Use Prawn to create a PDF using Rails - I've tried prawn but it seems to have a similar problem to PDFKit and I get confused about what goes where on a Sinatra app. I'm sure I read as well that people were having problems with it too.

Have I missed any obvious solutions to this, or is there something I'm not thinking of? All I want to do is create some kind of easily printable file with positioning intact that can be easily downloaded and printed by the user but I've come across so many problems that I don't know where to go next and I'm going round in circles.

If anyone had any advice for me about how I could get around this problem I'd really appreciate it.

Chris Norval
  • 3
  • 1

2 Answers2

0

It sounds like many of your issues relate to the necessary PDF binaries not being accessible on Heroku. In following with the twelve factor approach to dependency isolation Heroku purposely provides a very bare system.

If you need to run a custom binary on Heroku I'd suggest looking at a tool called Vulcan which can compile a binary that's compatible with the Heroku runtime.

Ryan Daigle
  • 11,599
  • 2
  • 36
  • 22
  • I'll chase up the jQuery plugin idea but if that doesn't work then I'll give this a shot. I have made things on Rails and hosted them on Heroku before, but it's just this new miniature app that is created as a Facebook template that is confusing me I think. Cheers. – Chris Norval Jul 16 '12 at 08:58
0

if prawn is giving you grief just use one of the jquery plugins to print your div content. You could even configure a pdf printer and print the document instead of hard copy if you so wish/need images in pdf format.

I use http://archive.plugins.jquery.com/project/jqPrint plugin in one of my projects and it works like a charm.

saihgala
  • 5,724
  • 3
  • 34
  • 31
  • This looks like the kind of thing I need. If I could do it through jQuery it would be so much easier. I just tried a similar plug in based on a tutorial and it wouldn't render anything from a canvas, so I'll try the jqPrint plugin you suggested and see how that works out. Cheers! – Chris Norval Jul 16 '12 at 08:56
  • sure just put everything you need to print in a div (say id="print-photos"), load "jquery.print.js" and invoke `$("#print-photos").jqprint();` from a button click event or similar. – saihgala Jul 16 '12 at 09:06
  • Yeah I gave this plugin a try and it didn't seem to work with Canvas either, it just gave me a blank page. I'm not sure if this is because it's not including any of the Canvas JS code or if it just doesn't work in the way I think it should. I think I'm getting closer though. – Chris Norval Jul 16 '12 at 09:17
  • Here are the relevant lines to the problem. Creating and drawing a canvas, drawing a square to that canvas (for testing purposes) and then sending that to print. Both JS files have been called in the erb file and are visible when debugging = http://www.pastebin.ca/2171494 – Chris Norval Jul 16 '12 at 10:52
  • you are right, with jqprint plugin it prints a blank canvas. However I found a similar question http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf. Give it a try and see if it helps – saihgala Jul 17 '12 at 07:44
  • It doesn't seem to fix the problem as the toDataURL method will throw up a security exception because of the external images. I'm looking into CORS ( http://www.w3.org/TR/cors/#use-cases ) but again that seems to be a bit tricky to do on a Facebook app since it's Sinatra. I really wish this wasn't so difficult! Thank you for all of your advice though, I really do appreciate it. – Chris Norval Jul 17 '12 at 14:17
  • I finally found a solution to what I was wanting to do, which was to simply bypass the security issue of the toDataURL and open it as an image. I found the getImageData ( http://www.maxnov.com/getimagedata/ ) plugin for jQuery which lets me create a new image, copy the content of Facebook's external image and display the new one on the canvas, meaning there are no cross-domain issues. I hope this helps others. Cheers for your help, Ashish! – Chris Norval Jul 17 '12 at 16:51