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".
Related
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).
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 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 ...
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
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