mORMot Open Source

Michael Gross

Member

Registered: 2020-05-15

Posts: 4

Muddy Image rendering in PDF

Hello all,

I use Delphi XE10.3.3 with VCL and the latest synpdf 1.18.5985.

I have some kind of "quality problem" rendering a picture in a PDF-File. Here is a screenshot with the infos.

I have noticed, the picture is not rendered at once, it is divided in pieces of 17 pixels height, each 17 pixels seem to be an image itself. In the PDF-File you can see it, if you click on the pic. I think this is the reason why the pic looks muddy at 100% Scaling.

http://migross.de/synpdf/muddyimage.pdf

Can someone give me a hint, what to do to fix the quality?

Greetings
Michael

EvaF

Member

Registered: 2014-07-19

Posts: 40

Re: Muddy Image rendering in PDF

The embeded image ( in the reasonable size) looks never well for bigger scaling.
Your logo is simple for direct drawing. I would directly draw the logo  into a pdf instead of placing image.
the advantage of this step is: the pdf will be less, the logo looks the best for all scaling

Michael Gross

Member

Registered: 2020-05-15

Posts: 4

Re: Muddy Image rendering in PDF

I don't know what is meant "directly draw the logo". The Drawing to my Live-Canvas is exactly the same routine(on the left), only to the PDF-Canvas (on the right). I think the picture is already drawn directly then.

And it is still not clear, why the picture is split to 17 pixel high slices. Does somebody know why this Splitting happens?

EvaF

Member

Registered: 2014-07-19

Posts: 40

Re: Muddy Image rendering in PDF

By "directly draw the logo" I ment, that you are able to draw your logo into canvas - not like a big image but - mainly the text - as curves
there are many ways
first of all I would split your logo into three parts:

1. text

2. background (=blue gradient)

3. middle rectangle

the 2nd and 3rd  items I would save into separate files (2nd with dimensions 1px x height of logo rectangle, 3rd in real dimension)

the text you can handle f.e.

1. you can write text (as curves) from your logo using syngdiplus ( or other graphics library) and save as wmf file and render this file in your pdf

2. you can write text directly into pdfcanvas (without or with ObjectX)

3. you can also use mormotReport library for text

I did a small example ( by eye, without any precise - using the first sample "SynPdfFormCanvas" that i met) and f.e. b) option
the pdf result of code bellow

function getPdfImage(aPDF:TPdfDocument; aName:PDFString):TPdfImage;
var
  FS: TFileStream;
  Graphic: TGraphic;
begin
  Graphic := TPngImage.Create;
  FS := TFileStream.Create(aName, fmOpenRead);
  try
    FS.Seek(0, soFromBeginning);
    Graphic.LoadFromStream(FS);
    Result:= TPdfImage.create(aPDF,Graphic,true);
  finally
    Graphic.Free;
    FS.Free;
  end;
end;
var
  obPDF: TPdfDocument;
  obFormCanvas: TPdfFormWithCanvas;
  obFormCanvasGrad: TPdfFormWithCanvas;
  oGrad,oMiddle : TPdfImage;
begin
  obPDF := TPdfDocument.Create(false,0,false);

  obPDF.GeneratePDF15File := true;
  obPDF.DefaultPaperSize := psA4;
  obPDF.DefaultPageLandscape := false;
  obPDF.CompressionMethod := cmNone;

//------------------------------ logo-------------------------
  oGrad:= getPdfImage(obPDF,'grad.png');
  obPDF.AddXObject('imgLogoGrad', oGrad);
  oMiddle:= getPdfImage(obPDF,'middle.png');
  obPDF.AddXObject('imgLogoMiddle', oMiddle);

  obFormCanvas := TPdfFormWithCanvas.Create(obPDF,Trunc(20.828*PDFFactor),Trunc(20.828/2.7*PDFFactor));

  obPDF.AddXObject('FORMOBJECT',obFormCanvas);
  obFormCanvas.Canvas.SetTextRenderingMode(trFill);

  obFormCanvas.Canvas.SetFont('Verdana',54.0,[pfsBold]);
  obFormCanvas.Canvas.SetHorizontalScaling(90);
  obFormCanvas.Canvas.SetCMYKFillColor(65,52,0,39);
  obFormCanvas.Canvas.TextOut(0,5*PDFFactor,'Live long and prosper');
  obFormCanvas.CloseCanvas;
//------------------------------ logo-------------------------

  obPDF.AddPage;
// ----------------------------- your content ---------------------------
  obPDF.Canvas.SetTextRenderingMode(trFill);
  obPDF.Canvas.SetFont('Arial',10.0,[]);

  obPDF.Canvas.SetLineWidth(0.01*PDFFactor);

  obPDF.Canvas.Rectangle(1.0*PDFFactor,1.0*PDFFactor,19.0*PDFFactor,27.9*PDFFactor);
  obPDF.Canvas.Stroke;

  obPDF.Canvas.TextOut(2.0*PDFFactor,27.0*PDFFactor,'XObject form canvas sample');

//------------------------------ logo background (=gradient)-------------------------
  obPDF.Canvas.DrawXObject(0,23*PDFFactor,20.828*PDFFactor,Trunc(20.828/2.7*PDFFactor),'imgLogoGrad');
//------------------------------ logo middle rectangle -------------------------
  obPDF.Canvas.DrawXObject(20.828*PDFFactor/2-oMiddle.pixelWidth/3,
                          25*PDFFactor -oMiddle.pixelHeight/3,
                          2/3*oMiddle.pixelWidth,2/3*oMiddle.pixelHeight,'imgLogoMiddle');
//------------------------------ logo text -------------------------
  obPDF.Canvas.DrawXObject(0,23*PDFFactor,1,1,'FORMOBJECT');


  obPDF.SaveToFile(ChangeFileExt(ExeVersion.ProgramFileName,'.pdf'));

  FreeAndNil(obPDF);
end.

small note:
if you use TPdfFormWithCanvas for drawing of text, fix yourself a small bug in this class:

constructor TPdfFormWithCanvas.Create(aDoc: TPdfDocument; W, H: single;aXForm:PXForm);
...
// instead of   FAttributes.AddItem('BBox',TPdfArray.Create(nil,[0,0,H,W])); write
  FAttributes.AddItem('BBox',TPdfArray.Create(nil,[0,0,W,H]));
...
end;

Last edited by EvaF (2020-05-29 06:39:46)

ab

Administrator

From: France

Registered: 2010-06-21

Posts: 14,659

Website

Re: Muddy Image rendering in PDF

Nice!

I have integrated your fix to https://synopse.info/fossil/info/5ee988d87c

Michael Gross

Member

Registered: 2020-05-15

Posts: 4

Re: Muddy Image rendering in PDF

Many Thanks for your efforts to draw the logo manually. This would bei a nice solution, if it would have been the only logo. Unfortunately every User has it's own logo. This was only a sample.

Now back to my question. I can't find a slicing in 17 Pixelheight in the source Code. I still think the Logo would look better if it would be rendered in one Piece and not in 17 pixel-Slices. Please take a look in my linked PDF-File, click on the Logo an you'll see what I mean. This is not one image, there are many small images.

Has someone an idea?

EvaF

Member

Registered: 2014-07-19

Posts: 40

Re: Muddy Image rendering in PDF

you are include into pdf really huge image 4916 x 1830 (approx) and moreover ( at least to seems to me) you used JPEG compression - therefore it is splitted (imho - i can be wrong of course) . ( 4916 is width of your picture rounded up and height I calculated by proportinality)
try to play with less image, without compression..
But to be true I couldn't afford such big images in my pdfs. You should invent some more efficient way how and in which form to put logo images into your pdf.

Michael Gross

Member

Registered: 2020-05-15

Posts: 4

Re: Muddy Image rendering in PDF

I used this Imagesize in this example, because it is the value for a 100% scale at exactly 600 dpi for 180 mm width. So it would be 1:1 on A4-Papersize. But this is only a sample pic.

In many other cases smaller Images are used. And if I use a smaller resolution the image is still split in slices.

It makes no difference if I use a Compression in JPG or not. And it makes either no difference if I use a PNG with no Compression. Even a Windows-Bitmap is sliced.

Can anyone name a reason why this splitting happens? I'm sure the quality loss would disappear, if it would be drawn at one.