How can I show tiff extension on Google Chrome? - javascript

I really need help for this problem. I searched it more than 2 days but i couldnt find any solution.
I have an application wrritten by ext.net framework at fronthand side. I have a problem related with showing tif file in a browser.You know some of browsers don't support tif file.Only IE and Saffari browsers support it.But I want to show it in Google Chrome browser.Also I want to not only view but also magnify and shrink to examine it.At this point, to meet my need what can I do.According to some research, It can be shown after conversion to other standart image format(png,jpg).Would you show me a way to overcome this problem.
Thanks in advance

TIFF is not a format suitable for images on the Internet, and it is poorly supported. Instead, you should use:
JPG for photos (JPG's compression is not lossless, but it's good for photos).
PNG for ClipArts and schematics (it has lossless compression which is good for large uni-color surfaces).
The preferred way to convert would be to directly access the TIFFs on your server and to convert them, either with a graphical tool like GIMP or with a console batch converter like imagemagick (check their websites for demos).
I cannot recommend sending a TIFF to the client and let them convert it at every access. It sends too much data, results in a longer page load, decreases battery life of handheld devices and is much less portable.

Related

HTML5 web audio API wavesurfer.js crashes on large mp3 files

I was planning on using wavesurfer.js in a project of mine so I checked out the demo on http://wavesurfer-js.org
I dropped a large mp3 file (around 2 hours) onto the middle of the page that asks for a file. It seems to want to load it but after a while Chrome comes up with an error. It doesnt crash, just the tab fails.
With smaller files, single songs, it seems to work ok.
So there seems to be either some limitations with html5 web audio or the websurfer.js library but im not sure. Does anyone have any ideas?
wavesurfer.js GitHub: Large MP3 files cause DOM Exception 12
Sorry that it takes so long to resolve this. From what I managed to google, Safari and Chrome can't decode a large binary due to memory limits.
It looks like it can't be fixed right now, perhaps in the future. They're trying other approaches but without success so far.

Does HTML/javascript client-side image compression seem like a reasonable, fool-proof plan?

I have a plan to add images to a chat I've created, but the problem is that I have a small amount of bandwidth to use and I don't want to overstay my welcome, so does this form of file compression seem legitimate and safe? If you open developer tools on any common broswer, you can see how many bytes come in and out of the local compressor, and the elapsed time.
Each result differs on each computer when using the same image, and it uses "image/webp" format when Chrome is available because it uses less space than any other format. GIFs loose their animation and PNGs lose their transparency.
Is there anything I am missing? It combines HTML5's canvas.toDataURL() compression and LZW compression together to deliver maximum results. It works in Chrome and IE10, and I haven't been able to test it on any other browsers. My goal isn't to make it compatible with every browser, but instead to deliver a convenient form of compression.
It combines HTML5's canvas.toDataURL() compression
That's not "compression", it's "encoding", and it's a bad idea. You're not compressing anything, converting the image to a base64-encoded data URI will decompress the image, as you can fit a lot fewer bytes in base64 than you can in actual 256 bit binary encoding. LZW Compressing the resulting text will have negligible benefit.
You can put your image in another host. There is plenty of free picture's hosting service out there.
Your bandwidth will be safe, no data transmission require. But it depend of what you need to do with theses pictures ...

Paste image to a web page

I did some research for a wysiwyg editor and found ckeditor that seems to be nice however I need to be able to copy/paste an image to the editor.
I found this web site that do exactly what I need http://pasteboard.co/ so its possible however I cannot find how it's done.
Do you have any ideas or solutions?
I would prefer a solution in pure html5/javascript and avoid any plugin but a silverlight or flash is acceptable too.
There are two ways you can handle this, the easy way, and the hard way.
The Easy Way:
Utilize the Clipboard API. This is an "HTML5" API, but it is only properly supported in Chrome. This will allow you to access a pasted image, from your clipboard, as a Blob. You can then send this Blob to your server via an XHR2 request.
The Hard Way:
Unfortunately, this is what you must do for all browsers other than Chrome, and it's not pretty. It involves you creating a hidden content-editable DIV inside of a "paste target element". This will receive the pasted image. You will then need to draw the image onto a <canvas> which will then need to be converted to a Blob. But wait, it gets better. You may also need to proxy cross-domain images (server-side) in some cases (possibly many cases). This may be required if the server hosting the image does not permit CORS requests on the images they host. You can read more about this situation in this MDN article.
A javascript-based uploader I maintain, Fine Uploader, already supports uploading images via paste, but in Chrome only at this time. I figured I would go through the hassle of implementing this in non-Clipboard API browsers if I received enough requests. Quite frankly, though, since handling non-CORS-enabled images in browsers that do not implement the Clipboard API requires proxying the image server-side, it hardly seems like its worth the effort (unless, of course, my user base tells me that they want it).
Hope this helps.

Internet Explorer and Base64 image display

In aim to manipulate more easily various images on client side with Javascript, I wrote a function on server side (in VB 2010) to convert a file into a base64 string that I send to the client.
When I tried it in Internet Explorer 8.0 with 3 different images, 1 portrait and 2 landscapes, I realized that only the portrait image was displayed entirely, meanwhile both landscape images were truncated (I can see just the upper part of the image).
I thought I had a bug in my conversion function, until I tried my local page with Firefox: every image is perfectly displayed by Firefox.
So there is my question: Is this a well-known bug of Internet Explorer ? If the answer is yes, Is there a well-known remedy for that well-known bug?
IE8 can only do Base64 URI images up to 32kb in size. It's a marginally annoying limitation, but you can still get by with icons/etc. Keep in mind that Base64 encoded images are on average 33% more data sent down the pipe anyway, so it's... eh, y'know, use your judgement.
For anyone interested, it's also possible to make these work in IE6/7 (without, I might add, that 32kb limit...): http://venodesigns.net/2010/06/17/you-got-your-base64-in-my-css/
IE8 is limited to 32KB. One way around this is to just serve the images in 'tiles' where each tile is less than 32KB.

Saving flash chart to png

In Fusion charts 3.0 they have option to save the graph as PNG. But it is only for licensed users. But they don't have that option for free users. My requirement is to save it as an image somehow. Is it possible in the free version. To achieve that what am I supposed to do. Is there any mechanism ( 3rd party tool ) to convert flash into PNG.
Thanks
`Shafi
Use your OS's built-in screen capture facility.
Windows: Alt+PrintScreen - captures to clipboard
Mac OS X: Command+Ctrl+Shift+3 - captures to clipboard
Mac OS X 10.4+: Command+Shift+4 - captures to PNG file on your desktop
don't know about other platforms
After capturing to the clipboard, you can use almost any graphics app to save it as a PNG.
See this: DisplayObject to JPEG or PNG with IImageEncoder
You can use any screen shot tool: IrfanView (Options -> Capture) or SnagIt!
Since FusionCharts Free is coded in Flash 6, you cannot directly export it to image. In FusionCharts v3 also, we make use of Flash 10 code (externally) as that provides us Byte Array needed to encode display bitmap into PNG. Without this, the only option we had till Flash 8 was to send it to server, which in turn decoded it. However, in FusionCharts Free we cannot even do that, as even bitmap access is not possible. As such, your only option is to use a client side tool that can save image.
Or, if you're using .NET, you can generate the chart on server, save as image and then use that. However, that is a bit processor intensive if you've to generate thousands of charts concurrently (as Flash objects need to be instantiated on server).
Cheers,
Pallav
FusionCharts Team

Categories

Resources