Missing images after conversion Html to Pdf

[zxdev777]

Hi all,

I have defined rule, which automatically convert html files to pdf.

In converted PDFs there are just blank rectangles instead of images.

Is this known issue or what is missing on our side ?

Thanks

[zxdev777]

I found out that it works if you specify source of image in format of base64

src = data:image/png;base64,iVBORw ...

The problem is that inline editing remove it 😕

[mehe]

Hi ZZ, I can remember there were several projects to improve HTML2pdf conversion. One used wkhtml2pdf and was hosted on github. Searching for wkhtml2pdf and Alfresco should be successful.

[zxdev777]

Hi Martin,

Thanks for tip. I successfully configured wkhtml2pdf as transformer from html to pdf, but utility still does not work as I expected.

Can I find somewhere in documentation how to link images properly in html files ? It seems there is problem with permission / visibility of images.

Both "Html -> Pdf" transformers - wkhtml and openoffice works fine if image is public visible or directly base64 encoded in html.

From my point of view the best would be to fix tinymce editor and include image as base64 encoded - all data is available for transformer. 

Does anybody know why after click "Edit in Alfresco share" images with src="data:image/png;base64 ..." are removed from content and images with src="http:// .." not?

Thanks

[mehe]

Hi Z Z,

if you want external images referenced by <img src="Http://..." your image-url has to be resolvable during the conversion process.

If you put your image, for example on a web server in your local Network and this image is "visible" for the alfresco server during conversion, the image will be embedded in the pdf document.

Lets say you put your image myimg.png on the local web server with ip 192.168.168.168 in the htmlroot/img directory, the image should be referencable by the source-Url src="http://192.168.168.168/img/myimg.png" (if not sure, try to view or wget it on your alfresco server).

I'm not quite sure if it is possible to use an inline image with a data "url", but I can look into this if you need...

PS: src url with local web-server works, tried it with Alfresco Community 5.2

regards, Martin

[zxdev777]

Hi Martin,

Images should be uploaded to the same folder in document library as html files.

I tried scenarios:

Image linked in html / Transformer	OpenOffice (out of the box in 5.2.e / 5.2.d)	wkhtml2pdf
Copy link when you click in Share on "View in Browser"	-	-
Right click on image in Share and copy image address	-	-
Base64 encoded	✓	✓
Share image by URL (in Share app) and copy just image address - (not acceptable from business point of view)	-	✓

The problem is with tiny mce editor if you start edit html file, base64 embedded images are removed..

[zxdev777]

Hi,

I think I got it.

here is the part which remove base64 encoded images:

if (!editor.settings.paste_data_images) {
   var i = nodes.length;

   while (i--) {
      var src = nodes[i].attributes.map.src;

      // Some browsers automatically produce data uris on paste
      // Safari on Mac produces webkit-fake-url see: https://bugs.webkit.org/show_bug.cgi?id=49141
      if (src && /^(data:image|webkit\-fake\-url)/.test(src)) {
         if (!nodes[i].attr('data-mce-object') && src !== Env.transparentSrc) {
            nodes[i].remove();
         }
      }
   }
}

So I found editor params in: 

share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\form\controls\common\editorparams.inc.ftl

And modified it with:

editorParameters:
{
   paste_data_images: true,

Now base64 images are not removed

[mehe]

Hi Z Z,

 glad you got it working with data urls. I think it's not really possible using urls pointing to share images, because the conversion process is external and cannot access the images stored in share. 

It was sufficient for me to get the external image resources (logo and so on) from a http server because I only needed the resulting PDF and there, the image was embedded

But after all, maybe I will switch to data urls

[zxdev777 · Accepted solution]

Here is configuration added to share config custom xml:

<config evaluator="node-type" condition="cm:content">
   <forms>
      <form id="doclib-inline-edit">
         <field-visibility>
            <show id="cm:name" />
            <show id="cm:content" force="true" />
            <show id="cm:title" force="true" />
            <show id="cm:description" force="true" />
         </field-visibility>
         <appearance>
            <field id="cm:name">
               <control>
                  <control-param name="maxLength">255</control-param>
               </control>
            </field>
            <field id="cm:title">
               <control template="/org/alfresco/components/form/controls/textfield.ftl" />
            </field>
            <field id="cm:content" label-id="">
               <control>
                  <control-param name="editorHeight">650</control-param>
                  <control-param name="editorWidth">780</control-param>
                  <control-param name="editorAppearance">custom</control-param>
                  <control-param name="forceEditor">true</control-param>
                  <control-param name="editorParameters">
                     paste_data_images: true
                  </control-param>
              </control>
            </field>
         </appearance>
      </form>
   </forms>
</config>

[mehe]

Thanks for sharing