Develop Reference

How to get pasted images with transparency in Javascript

When detecting pasted images using event.clipboardData, the alpha channel is lost. Apparently this is because Windows stores images in the clipboard as 24-bit bitmaps.
I've heard that some applications store the transparency data of copied images separately, but I can't find out whether this can be accessed through clipboardData.
Here's a pasted image detector I wrote a while ago:
http://12Me21.github.io/paste/

I actually researched the subject of transparency on the Windows clipboard extensively, so while I'm not really experienced with javascript, I can help you along with the principles.
The clipboard works with a system of string IDs for their clipboard types, and you can put multiple such types on the clipboard simultaneously. In recent years, a lot of applications (including MS Office and Gimp) have started using the type "PNG" for transparent images, which will contain a raw byte stream with the bytes for a png image.
However, a much more commonly used one is the DIB format, which has clipboard ID "DeviceIndependentBitmap", and that one may be... problematic. Like the PNG one, it is a raw byte stream, but the actual file format is a bit of a mess. For more information about the DIB format, I advise you to read through this question and the answer I gave to it, and the Device Independent Bitmap specs and BITMAPINFOHEADER struct on MSDN. Long story short, it's a 32bpp RGB format that's abused as (and sometimes mistaken for) ARGB. I have no idea how plausible it is to parse DIB into a usable image in Javascript, though, but a lot of programs (including Google Chrome) seem to use it as only transparent image format they put on the clipboard when copying an image.
To fully support transparent pasting you'll probably need to support both the PNG and DIB formats (and, given the problems and controversies surrounding DIB, preferably in that order). This answer may give more information regarding the general method to sift through the clipboard and parse the PNG and DIB images, though it is C# code, and not Javascript.

Here's what I found:
In all tests I've done, pasting pixels results in a single image/png blob in the clipboard, so there's not much you can do - it either works, or doesn't.
The behaviour is consistent between paste event, navigator.clipboard.read, and pasting into contenteditable.
Transparency is hopelessly hit and miss on Windows depending on how the data is copied:
from Paint.NET: opaque in both Chromium and Firefox.
from Krita: transparent in Firefox, opaque in Chromium.
from Aseprite: transparent in Chromium, opaque in Firefox.
This is probably due to the aforementioned nightmare of clipboard formats on Windows.
Transparency works remarkably well on Linux - I have tested copying from Krita, Aseprite, and GIMP with Firefox and Chromium and all is well.
Specification does not say anything about discarding or not discarding alpha channel, perhaps making it implementation-defined in general.
A workaround is to also offer the user to provide their images via <input type="file" accept="image/*"/> and/or drag-and-drop events (for files), both of which are free of this issue (likely due to passing the file as-is).

How to use toDataURL to set as PNG8?

Pretty simple question but I can't find documentation anywhere. How do I tell canvas.toDataURL() to save the file as a PNG-8?
thumbnail = canvas.toDataURL();
I know I could pass "image/jpeg" to get a jpeg, but how about a PNG-8?

There is no common builtin method to produce palette-indexed PNGs in any of the major browsers today. The browsers are only required to support basic PNG 24-bit bitmap and alpha.
Though, they are free to support any additional format they desire but it's unlikely they will move too much away from what is cross-browser compatible (some exceptions exist but is not used much such as TIFF in Safari, ICO in Firefox).
For this to work today however you would need to extract the pixels, quantize the colors into a palette, then compile the file, format the bitmap, encode it and compress it - then save it out. It's doable but it's a project on its own.
Optionally look into services such as TinyPNG [I'm not affiliated]. They provide an API which can be used to programmatically send your ordinary PNGs and have minimized PNGs returned, usually meaning "PNG8".

How can I show tiff extension on Google Chrome?

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.

Render SVG to PNG on the server with pure JavaScript

The title says it. I know Imagemagick can do that, but let us assume I am on a cloud server that will only allow me JavaScript (coughnodestercough). Which is not a bad thing, actually.
Recently I heard that there are h.264 renderers in javascript, so png is not that far fetched?

A PNG renderer is not far fetched, in fact it already exists: http://devongovett.github.com/png.js/
The problem here is that you would need a "fake canvas" implementation that doesn't draw anything, just builds a pixel array, that could then be saved to a PNG. There is nothing like that 'cause it's kind of useless except for this case...
i.e.: svg -> bitmap renderer (fake canvas) -> rgb array -> png file
Some hosting providers will allow you to declare system-level dependencies, or have some defaults available. gm would work fine for this purpose:
gm = require('gm')
gm('image.svg').write('image.png', function(err){
if (!err) console.log('image converted.')
})
You can apparently install imagemagick/graphicsmagick on a http://no.de machine, and dotcloud also has IM available. Ask the guys at nodester, it's very likely that they have a graphics library available.

Unfortunately, all of the advanced rendering available in JavaScript is through browser implementations of the HTML5 canvas. NodeJS lacks these features.
There are extensions for NodeJS that let you do image manipulation, but you can only use those if your host installs them.
http://ajaxorg.posterous.com/canvas-api-for-nodejs
https://github.com/rsms/node-imagemagick (just requires that
imagemagick is installed)

There's svg2png, which uses a headless browser to render svgs to png.
https://github.com/domenic/svg2png
https://www.npmjs.com/package/svg2png

Displaying a local gstreamer stream in a browser

I have a camera feed coming into a linux machine using a V4l2 interface as the source for a gstreamer pipeline. I'm building an interface to control the camera, and I would like to do so in HTML/javascript, communicating to a local server. The problem is getting a feed from the gst pipeline into the browser. The options for doing so seem to be:
A loopback from gst to a v4l2 device, which is displayed using flash's webcam support
Outputting a MJPEG stream which is displayed in the browser
Outputting a RTSP stream which is displayed by flash
Writing a browser plugin
Overlaying a native X application over the browser
Has anyone had experience solving this problem before? The most important requirement is that the feed be as close to real time as possible. I would like to avoid flash if possible, though it may not be. Any help would be greatly appreciated.

You already thought about multiple solutions. You could also stream in ogg/vorbis/theora or vp8 to an icecast server, see the OLPC GStreamer wiki for examples.
Since you are looking for a python solution as well (according to your tags), have you considered using Flumotion? It's a streaming server written on top of GStreamer with Twisted, and you could integrate it with your own solution. It can stream over HTTP, so you don't need an icecast server.
Depending on the codecs, there are various tweaks to allow low-latency. Typically, with Flumotion, locally, you could get a few seconds latency, and that can be lowered I believe (x264enc can be tweaked to reach less than a second latency, iirc). Typically, you have to reduce the keyframe distance, and also limit the motion-vector estimation to a few nearby frames: that will probably reduce the quality and raise the bitrate though.

What browsers are you targeting? If you ignore Internet Explorer, you should be able to stream OGG/Theora video and/or WebM video direct to the browser using the tag. If you need to support IE as well though you're probably reduced to a flash applet. I just set up a web stream using Flumotion and the free version of Flowplayer http://flowplayer.org/ and it's working very well. Flowplayer has a lot of advanced functionality that I have barely even begun to explore.