Question about rendering .tiff image in HTML - html

In my html page, I created an tag to render some of my .tif format images.
Since .tif images can not be rendered directly in "src" attribute of the tag, so I created the following code to render it:
<object width="200" height="200" type="image/tiff" data="Test.tif">
<param name="src" value="Test.tif"/>
<param name="negative" value="yes"/>
</object>
Everything worked perfectly :) in both Chrome and Firefox, but the image is not rendering in IE. Wonder if any expert could offer some help?
Thanks a lot!

tif is not a standard format for the web (though the spec doesn't define a standard list) and it won't be displayed in all browsers.
It looks like it only has support for IE and Safari.
Browser Image Support

You can convert it to a different file format, e.g. by screen capturing it using the PrtScrn button, then cropping it on Paint and saving it as a jpg/png/etc. file that every browser can display. If not, then somehow you will have to tell people to modify their registry because there is a registry that prevents .tif files by being rendered. Try looking at this:
http://www.pctools.com/guides/registry/detail/1182/

You can also use PHP and ImageMagick to convert the tiff images to png or jpeg on the fly. That way they will render nicely and work in all browsers.
http://www.imagemagick.org/script/index.php

Related

HTML embedded PDF iframe

I have used the tag to embed a pdf file.
<iframe id="iframepdf" src="files/example.pdf"></iframe>
This works fine in Chrome, IE8+, Firefox etc, but for some reason, when some people are viewing it in IE8, the files are downloading instead of embedding. I know this browser is outdated but it is the standard browser within my office and as such, the website has to be designed for this.
Does anyone have any ideas on why this is happening, how I can fix it or else put an error message instead of letting the files download?
It's downloaded probably because there is not Adobe Reader plug-in installed. In this case, IE (it doesn't matter which version) doesn't know how to render it, and it'll simply download the file (Chrome, for example, has its own embedded PDF renderer).
If you want to try to detect PDF support you could:
!!navigator.mimeTypes["application/pdf"]?.enabledPlugin (now deprecated, possibly supported only in some browsers).
navigator.pdfViewerEnabled (live standard, it might change and it's not currently widely supported).
2021: nowadays the original answer is definitely outdated. Unless you need to support relatively old browsers then you should simply use <object> (eventually with a fallback) and leave it at that.
That said. <iframe> is not best way to display a PDF (do not forget compatibility with mobile browsers, for example Safari). Some browsers will always open that file inside an external application (or in another browser window). Best and most compatible way I found is a little bit tricky but works on all browsers I tried (even pretty outdated):
Keep your <iframe> but do not display a PDF inside it, it'll be filled with an HTML page that consists of an <object> tag. Create an HTML wrapping page for your PDF, it should look like this:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<div>No online PDF viewer installed</div>
</object>
</body>
</html>
Of course, you still need the appropriate plug-in installed in the browser. Also, look at this post if you need to support Safari on mobile devices.
Why an HTML page? So you can provide a fallback if PDF viewer isn't supported. Internal viewer, plain HTML error messages/options, and so on...
It's tricky to check PDF support so that you may provide an alternate viewer for your customers, take a look at PDF.JS project; it's pretty good but rendering quality - for desktop browsers - isn't as good as a native PDF renderer (I didn't see any difference in mobile browsers because of screen size, I suppose).
If the browser has a pdf plugin installed it executes the object, if not it uses Google's PDF Viewer to display it as plain HTML:
<object data="your_url_to_pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
Iframe
<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>
Object
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
Try this out.
<iframe src="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0" height="100%" width="100%">
</iframe>
Use Adobe Embed PDF API. This is the solution i used in the end, Works perfectly.

Embed XML in HTML (for Mozilla Nightly)

I've seen that there is another post with a similar name, but it doesn't help me.
I use this:
<embed src="../xml/menu.xml" />
to embed some XML content in a div from an HTML file. It is working (the content is displayed) in Google Chrome and Internet Explorer, but not in Mozilla Nightly.
Do you know how to make it work even for Nightly?
Use <object> instead. Per spec, <embed> will only show content handled via plug-ins and SVG, not random document types like XML.

Problem in time to show images

I need to show pictures of direfentes formats such as JPG, GIF, BMP, TIF, PNG, PCX, but I'm not getting the images in tif and pcx formats appear in the html image tag, anyone know how I could do this?
The img tag can only handle jpg, gif, bmp and png files. To display i.e. a tiff file you can use the embed tag.
<embed width=xxx height=xxx src="tiffdocument.tif" type="image/tiff">
More variations here
Most browsers can't display TIFF and afaik no browser can display PCX images, using standard <img> tags.
A solution would be to convert the image to a supported format, either manually or automatically (using php or server-side language).
Repeat of: Display TIFF image in all web browser. It's browser support issue.

opening a tiff image in IE

Is it possible to open Tiff images in IE, just like BMP opens in IE.
When i try to assign an iframe source as a tiff image it pops up a save dialog. i want to display tiff image inside an IE page.
Following is a sample which i was trying
<iframe src='C:\Users\XYZ\Desktop\Untitled.tif'; id ='hello'></iframe>
IE does not natively support TIFF images. You have three options:
Use a browser plugin such as: http://www.alternatiff.com/
Convert the image on the fly before presenting to the browser.
Batch convert the images to another format.
The preferred solution will depend on your situation.
Internet Explorer doesn't support TIFF images natively. You need a plugin for this to work. Check http://www.alternatiff.com/
Try the classic "applet" instead...

Show SVG files on Sharepoint 2007

I'm building a WSS site which has to show SVG files stored on WSS.
I'm trying to use <object> tag to show it and it doesn't show, however, if I use <embed> it works ok. Im'using IE8 and IE7
I've been reading and everyone tells IE prefers <Object> over <embed>, but in WSS it doesn't work this way.
To display the file I'm using a web content editor webpart with this code:
<object type="image/svg+xml" data="/samples/sample.svg"
name="owMain" width="400" height="150">
</object>
Any clue??
I've found that it's not actually necessary to embed SVG as an object.
If you use the SVGWeb JavaScript library, you can actually put your SVG into a normal Content Editor Web Part via the Source Editor, and manipulate the SVG elements via JavaScript.
The library can also work with a referenced SVG file as an object, but I haven't tried that option.
The library is hosted on code.google.com
You cannot add object tags to the html content of a page in WSS. The issue is that the object tag can be used in lots of very bad ways, so it is stripped out by the underlying engine.
You have found that the content editor webpart does not suffer from the same limitations.
The first step, if you haven't already, is to confirm that the HTML content in the response is as you expect (e.g. view source). If it isn't then you've found your issue. If it is, the next step might be to use a debugging proxy like Fiddler to confirm that all of the related requests are being made and handled as you expect. If they're not then you've found your issue (e.g. security). If they are then by the process of elimination you can safely conclude that either the markup or the browser is lacking.
Is it me or IE does not support SVG? Well, it kinda does but it is tricky and it's to draw, not to show svg files. ... If you open with FF can you see what you are expecting?
added
I made an svg draw in IE ... it's not the same, I know, but it's something that you can read and test: stackoverflow.com/questions/536676
I managed to do this on IE7/8 with the following Html:
<embed width="600" height="450" id="objMapView" src="http://XXXXXXXX/file.svgz"
type="image/svg+xml" name="objMapView" border="1"/>
It works Ok bur requires adobe's SVG Plugin