Search code examples
htmlimagefile-upload

How to insert a pdf file as an image in HTML?

<img src="img.pdf"> doesn't work due to it being a pdf. I don't like the embed and iframe environments either, since they add the pdf viewer options, the scroll etc. I tried converting the pdf to an image with the convert and pdftoppm commands on Linux, but these result in the image having extra white space on top and bottom to fit A4 format, and/or makes the background black (instead of white or transparent).

Any ideas?

Solution

  • enter image description here

    "Img" is in effect an iFrame of an embedded binary object, but it is borderless since it is statically scaled to one non zoomable size. Note the img above this text is framed as https://i.sstatic.net/xpw2l.png
    Yes there are ways to make it more dynamic https://media.tenor.com/mEXoadZB1QYAAAAi/man-talking.gif but vanilla binary PNG/JPG/ETC are imbedded, and part of the binary HTML viewer renders those fixed areas. You can switch them off if you wish, or they don't display if badly served.

    So why is PDF not simply treated like an image as per your question?

    The answer is simple they are a different type of binary that requires a different html viewing binary extension. One frequent complaint is why use "menus and scrollbars if not needed for a simple file?"

    The answer to that is those controls need to be in the extension, for zoom pan etc. So how comes the FireFox viewer above has none?, that's because as a user I switched them OFF.