Prawn : adding background image of larger resolution

Question

I'm creating a pdf book where I need to put a background image for each page.

The size of the page is (576 x 576) and the size of the background image is 2700 x 2700 (300 dpi.) (These sizes are the requirements so cannot be adjusted). My problem is - the background image appears out of proportion in the page. How can I fix this ? Here's my code:

 Prawn::Document.generate("#{Rails.root.to_s}/public/#{filename}.pdf", :page_size => [576,576], :left_margin => 50, 
:right_margin => 50, :page_layout => :portrait, :skip_page_creation => true,   :skip_encoding => true, 
:background => "#{Rails.root.to_s}/public/images/pdf/bg_blank_low.jpg" ) do |pdf|
    ....
    ....
    ....
)

Is there any other way by which I can place the image of 300 dpi as a background image.

I even tried adding pdf template as a background, but still no luck.

Any suggestion or hint will be much appreciated.

Thanks.

Inept

Answer 1

What you're trying to do can't be done using the :background option of Prawn::Document.generate since the :background option can't scale the image. If you want to use the :background option, you need to make sure your image is the same dpi as the PDF (normally 72dpi).

You can however simply imbed the image in the page, like you would a normal image and then float the text over the top of it. This works since when you embed an image you're able to scale it. The code might look something like this:

Prawn::Document.generate("#{Rails.root.to_s}/public/#{filename}.pdf", :page_size => [576,576], :left_margin => 50, :right_margin => 50, :page_layout => :portrait, :skip_page_creation => true, :skip_encoding => true) do |pdf|
  bg_image = "#{Rails.root.to_s}/public/images/pdf/bg_blank_low.jpg"
  pdf.image bg_image, :scale => 0.2311
  pdf.move_up 576
end

This will make your 'background' fully cover the page (since we manually calculated the scale 2700/576), if you want to respect your margins (this is probably a better way in general), you might alter to something like:

pdf.image bg_image, :width => pdf.bounds.width

This should automatically scale the image based on the width of the bounding box of the page. Of course you would need to change your move_up as well, something like:

pdf.move_up pdf.bounds.height

After you did this you can start putting your text in and it should appear over the top of your image and so we get our simulated scaled background.

Update

This is an update with regards to the comment. If you have pages being automatically created and you want them to have the same background then you're out of luck if you're using the current prawn release the way it is. If you really need this functionality, then you have to patch prawn.

Grab the prawn source (from https://github.com/sandal/prawn) and have a look at it. What you're after is lib/document.rb, on line 244 there is a method start_new_page, this is the one you're after. Within this method on line 280, you can see where the background is being set. Unfortunately it is using canvas which means, your image already has to be of the right size. This is why the background image doesn't scale automatically.

You will need to override this behaviour. Since this is Ruby, all you have to do is reopen the class within your project and then copy paste this method in (if you need more info on how to do this, there is plenty around on monkey-patching Ruby classes). Now you edit this method to your hearts content. The easiest way is probably to remove the canvas all together and then use our image trick from above. So the line ends up as:

image(@background, :width => bounds.width) if @background
move_up bounds.height

You can now go back to using the standard way of setting the background and everything should work.

Infact, you may even be able to get away with changing line 280 to this:

canvas { image(@background, :width => bounds.width) } if @background

And everything should work fine, saving you having to type an extra line :). Using image with the :width option should automatically scale the image, while using the :at option as prawn does won't scale the image.

Note: I haven't actually done this so you may need to work the kinks out.

Ludovico

Hello skorks, Thank you for your suggestion. I have tried this already. The problem with this approach is that if the text grows more than one page, the next page will not have background at all. In my application, I have to add the text retrieved from the database. If the text is longer and cannot be fitted in one page, prawn will automatically create a new page and append the remaining text into it. And the new prawn created page will have no background - simply white. Is there a way to put the image as background for the prawn auto-generated page ? Thanks once again. – Inept

Not with prawn the way it is, if you want to scale the image and make sure new pages have it as a background as well, you'll have to patch prawn. I'll update the answer with what I think might work, mind you I haven't actually done it, so you'll have to work out the kinks. – Ludovico

Thank you very much skorks. Your hint worked. However I had to work on lots of kinks but eventually made my way out. You Rock. Cheers. – Inept

@Ludovico plz help me in this question #22032771 – Chemical

this second solution could work with repeat(:all) do end but it put the image on foreground instead backgroud – Prodigious

Answer 2

If you only have one PDF page, a solution is to just don't use the background property at all, but just place the image at the first position of each page and define width as the full width with

pdf.bounds.width

Lindeman

Answer 3

If someone needs to add the picture after pages have been generated or just adding a transparent picture you can use :

pdf.transparent(0.5) do 
    pdf.image(file, options = {
       :at => [200, 220],
       :scale => 0.2
    })
end

Genetics