Log in / Register

Forum › How do I...?

Applying a drop shadow to images

sstanelle
Hi,

I am currently applying a drop shadow to an image (JPG or PNG) along the right and bottom sides. When I run the HTML through the Prince conversion algorithm, the image in the resulting PDF is pixelated/blurred whereas the same image in the PDF without a drop shadow is as sharp as the source image.

I am using Prince 11.3.2. We recently bought a server license specifically for the drop shadow support so it is a little disconcerting to be encountering this problem.

Has anyone on the forum experienced this or can someone direct me in terms of what I may be doing incorrectly? Below is a simple piece of HTML that exhibits the problem. Zooming in will clearly show the issue.

Thanks for any and all help!

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<p>
<b>This image is sharp.</b><br/>
<img src="C:\Temp\Sample.png" style="max-width: 93pt; max-height: 30pt;" />
</p>
<p>
<b>This image is blurry and pixelated when zoomed in.</b><br />
<img src="C:\Temp\Sample.png" style="filter: drop-shadow(2pt 4pt 0pt #33A457); max-width: 93pt; max-height: 30pt;" />
</p>
</body>
</html>
mikeday
Applying the filter forces rasterisation of the SVG, and the default resolution is 96dpi. You can increase the filter resolution with this CSS:
@prince-pdf {
    prince-filter-resolution: 300dpi
}

In a future release we may be able to avoid unnecessary rasterisation for some filter types such as drop-shadow.
wangp
There's no SVG in this case but there is an intermediate rescaling of the image when the drop-shadow() filter is applied. We'll try to improve the output by default in future.
mikeday
Oops good point, I see filters I immediately think SVG. :D
sstanelle
Thanks for your response! So am I to understand that the above css may still help in my case? I'm not in the office right now.
wangp
That's right.
sstanelle
Thanks again for the fast response. Applying the CSS works perfectly.
David J Prokopetz
We're having a similar issue, albeit with text rather than images; applying a drop shadow filter to a block element forces rasterisation of any text inside that element.

The solution proposed in this topic - increasing the rasterisation DPI - is suitable for screen applications, but it doesn't work for us because some of the PDFs we generate using Prince are destined for print (we use Prince to automate laying out TCG cards, among other things), and our printer requires that all non-logo text be vectors.

Edited by David J Prokopetz

wangp
Can you provide some more details of the effect you're looking for? We may be able to suggest a workaround for your specific case.
David J Prokopetz
Sure - consider the following example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.shadowed {
padding: 10px;
border: solid black 2px;
border-radius: 10px;
background: cyan;
filter: drop-shadow(5px 5px 5px #000000);
}
</style>
</head>
<body>
<p class="shadowed">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

We need to be able to achieve effects similar to this one without rasterising the text inside the affected block in the process.
wangp
Since the background is opaque, you could draw two blocks of the same size on top of each other, and only filter the bottom one. I don't know how to do that apart from duplicating the element and absolutely positioning both of them. (If you were using SVG you could do something with feMerge instead.)

We'll make drop-shadow() draw the top layer separately to avoid rasterising it.
wangp
This might be an acceptable workaround:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*
@prince-pdf {
  prince-filter-resolution: 300dpi;
}
*/

.shadowed {
  position: relative;
  padding: 10px;
  border: solid black 2px;
  border-radius: 10px;
  background: cyan;
}

.shadowed::before {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: 100%;
  height: 100%;
  z-index: -1;

  border: solid black 2px;
  border-radius: 10px;
  background: black;
  filter: drop-shadow(5px 5px 5px #000000);
}

</style>
</head>
<body>
<p>other</p>
<p class="shadowed">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>other</p>
</body>
</html>
mikeday
We have now released Prince 12.1 which tries to avoid unnecessarily rasterising content with drop shadows.