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).
Related
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".
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.
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.
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.
In chrome, when I paste files into text areas, I end up with the path, e.g /home/antimatter15/sha1.js. The paste event includes a .clipboardData object, with stuff like the standard getData/setData methods. There's also a .files but it's length is always 0. Is there any way to get the file that's being pasted, possibly with FileReader like how files can be dragged.
I looked for something similar some time back, and to my knowledge this is not possible with JavaScript and html alone (at least not in any reliable way). Firefox and IE 9 appear to offer some support for local file reading, but for the vast majority of visitors to a public facing site you will need a Flash, Java, or ActiveX control in order to access the clipboard.
We were looking for this functionality for a helpdesk application and settled on an inexpensive ActiveX control called xStandard. As such, I never did any testing with Java to be able to comment on that part of your question. Hopefully someone else can elaborate on that approach.
Can you provide further information on your userbase and if the OS and browsers are controlled?