This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Background color bleeding around images

blueskysd wrote on 2014-01-29:

I am using the API to generate a PDF from a web design with many overlapping divs.

When there is a background image AND a background color in a div, or when a background images is supposed to lay on top of another div with a background color, I am getting a very slight bleed around the images. See example attached.

support wrote on 2014-01-30:

Hello,

Unfortunately I'm not able to advise just from the screenshots. If you can post a link to your web design, I will look into what can be done about it.

blueskysd wrote on 2014-01-30:

Thanks, please look at

http://blueskyengine.com/zoracle/public/index.php/zor-report/kitchen-solvers/114?do=makepdf#competencies

I have had similar problems in the past when the browser "zoom" is set to less than 100% - so I have a feeling it has to do with the zoom factor.

-Jenny

support wrote on 2014-02-02:

Hello Jenny,

I'm not able to replicate the issue even when changing the browser zoom. Could you please share the Pdfcrowd settings you use for the conversion? Which PDF viewing software do you use?

blueskysd wrote on 2014-02-03:

Here is the code I'm using to generate the PDF:

<?php
require public_path().'/packages/pdfcrowd.php';

try
{   
    // create an API client instance
    $client = new Pdfcrowd("ME", "MYPASSWORD");
    
    $client->setPageHeight("8.5in");
	$client->setPageWidth("11in");

    // convert a web page and store the generated PDF into a $pdf variable
    $pdf = $client->convertURI('http://blueskyengine.com/report/kitchen-solvers/114?do=makepdf');

    // set HTTP response headers
    header("Content-Type: application/pdf");
    header("Cache-Control: no-cache");
    header("Accept-Ranges: none");
    header("Content-Disposition: attachment; filename=\"Report.pdf\"");

    // send the generated PDF 
    echo $pdf;
}
catch(PdfcrowdException $why)
{
    echo "Pdfcrowd Error: " . $why;
}
?>

support wrote on 2014-02-04:

Hello Jenny,

The URL currently returns 500 Internal Server Error: ErrorException: Undefined index: gender. Please let me know once the web page is up again.

blueskysd wrote on 2014-02-05:

Sorry about that!

The link http://blueskyengine.com/report/kitchen-solvers/114?do=makepdf should work now.

Thanks,
Jenny

support wrote on 2014-02-06:

Hello Jenny,

Ok. I looked into it and it seems to be PDF viewer specific. Some PDF viewers render the bleed whereas others don't. Unfortunately there is no setting in the API that would fix it. If you want to get rid of the bleed you need to change the way the chart is rendered. For example, one option could be to use two opaque background images instead of the transparent background-image and background-color combination.

blueskysd wrote on 2014-02-06:

I've noticed that different PDF viewers render bleed in different divs, but they all do it. Are you sure there's nothing I can do to fix? I can't use opaque images due to the dynamic nature of my web app - the colors are customized to the user.

Ugh...

Thanks for your help,
Jenny

support wrote on 2014-02-07:

Hello Jenny,

You can generate opaque images dynamically using the Canvas object. An example:

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <style>
    td { width: 20px; height: 20px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <td class="hilite"></td>
      <td class="hilite"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="hilite"></td>
      <td class="hilite"></td>
      <td class="hilite"></td>
      <td></td>
    </tr>
    <tr>
      <td class="hilite"></td>
      <td class="hilite"></td>
      <td class="hilite"></td>
      <td class="hilite"></td>
    </tr>
  </table>
  <script>
function getBackground(color) {
  var canvas = document.createElement('canvas');
  canvas.width = 20;
  canvas.height = 20;
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(10, 10, 7, 0, 2*Math.PI);
  ctx.fill();
  return canvas.toDataURL();
}

$(function() {
  var hiliteBackground = getBackground("#5888a0");
  var greyBackground = getBackground("#e2e2e2");
  $("td").css("background-image", "url(" + greyBackground + ")");
  $(".hilite").css("background-image", "url(" + hiliteBackground + ")");
});
  </script>
</body>