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
Related
Final Update
For most practical purposes, this question is obsolete as both firefox and chrome have native support for avif through the standard picture html tag with a source marked as type="image/avif". See https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/ . Fire fox still likes to hang and often forces a control F5 to bypass caches and requires sending the correct content type from the server. Hopefully will be fixed soon.
Here is the commit where I got avif support working: https://github.com/quackack/quackack-comics/commit/f1a98ed1f40b6a22584d61bc338bd91df3232fa5#diff-e25b0950ce48f4e928f98e0a6fbb694c . Note that it contains many unrelated changes and in fact avif is barely mentioned, only as a content type and a file extension.
Original Question
I am trying to change a website where I host web comics from using jpegs to the newer avif image format. It is much smaller and seems to be the new image format with the most widespread support. Unfortunately, web browsers don't properly support the new format yet. So I was planning to use this package: https://github.com/Kagami/avif.js to allow my comics to be rendered. Some basic tests showed that AVIF would give the same quality as jpeg for less than half the space.
Unfortunately, after more than 5 hours of time spent on this, I am unable to get this to work with my react framework. You can see my website at the time of writing at 'https://github.com/quackack/quackack-comics/tree/cda4c3893d8477192c4ff3aa78d00096b7621ff7'.
I tried using npm install to install avif.js and then added
require("avif.js").register("/avif-sw.js");
to index.js . But I get error
Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/’: Bad Content-Type of ‘text/html’ received for script ‘http://localhost:3000/avif-sw.js’. Must be a JavaScript MIME type
And avif files are still not able to load. I think the requests are getting rerouted to index.html instead of the javascript package. It seems like the appropriate thing to do is something like
import * as avif from 'avif.js';
avif.register('avif.js/avif-sw.js');
But this fails too with the same error, as do many other similar variations.
At this point I am inclined to wait for proper browser support for avif, as I don't get enough traffic to worry about data costs anyway. If this could easily be fixed, then I would love to have the improvements from avif. I just want smaller file sizes and widespread browser support.
Update
Okay, I found that I could get this to work if I changed from the default react bundler (which I believe to be webpack) to Parcel. Then it does work exactly as you expect... until I try to deploy the project.
There is an issue where I cannot load the service worker when i try to deploy my single page webapp to AWS as a single page web app. There it makes a request to my url with avif-sw.js where there is not actually a js file. I believe the issue is closely related to https://github.com/parcel-bundler/parcel/issues/670
So the first key is to use Parcel to build your web app. But Parcel still does something wrong with deployment it seems. I will continue to investigate this in a few days.
Here is the almost working version using parcel: https://github.com/quackack/quackack-comics/tree/parcel
Update 2
My earlier update was incorrect. I only thought it was working because of a cached service worker. My final solution is in the answer below.
It doesn't seem to be a problem now. Simply convert your images to avif with tools like https://avif.io/ and use them as the image source or background source via typical CSS. As Chrome and Firefox now support it (even though users still have to enable it on Firefox), everything goes well. Even works on mobile now! :)
Okay, I finally got it working. Unfortunately, mobile devices don't seem to be able to handle the large file sizes so I had to keep using jpeg anyway. It worked on my laptop though.
Here is the commit that got everything to work: https://github.com/quackack/quackack-comics/commit/75e75307e688f0e515b4bbc9eb22eef290d2c209
What I had to do:
Switch to Parcel.
Copy the contents of the avif.js library into source before building. I used the command:
copyfiles -f node_modules/avif.js/*.js .
Put this specifically into reg.js:
require("avif.js").register("./avif-sw.js");
navigator.serviceWorker.register("./avif-sw.js", undefined);
What the last two steps do is trick parcel into actually keeping a copy of "avif-sw.js" around that can actually be loaded as a service worker. Probably with a bit more tinkering you can get this to work without using parcel at all, just by copying local and then registering. No requires required. But I stopped investigating after I found this solution can't work on mobile.
This was exceptionally hard to debug because service workers are cached by the browser and I had to clear broswer data after every edit. It was also hard to debug because the source files are cached to so I had to delete my projects cache and build frequently too.
You might also want to use npm module "http-server-spa", or similar, to test how your built SPA will act when deployed.
I would like to see if it's possible to have direct access to Opus using getUserMedia or anything similar from the latest browsers.
I've been researching on it a lot but with no Good results.
I'm aware that either Opus or Speex are actually used in webkitSpeechRecognition API. I would like to do speech recognition but using my own server rather than Google's.
So there are a lot of suggestions about Emscripten but nobody did, so I ported the encoder opus-tools to JavaScript using Emscripten. Dependent on what one has in mind, there are now the following opportunities:
Encoding FLAC, WAVE, AIFF, RAW files || demo || Web Worker size: 1.3 MiB
Encoding raw stuff for immediately processing or sending without container || demo || Web Worker size: 0.6 MiB
Encoding to Ogg-Opus and WAV from getUserMedia stream
When using Mozilla Firefox, it's possible to use a MediaRecorder, which would also allow to convert arbitrary sound files into Opus format on supported platforms together with AudioContext.decodeAudioData()
We're using emscripten for encoding and decoding using gsm610 with getUserMedia, and it works incredibly well, even on mobile devices. These days javascript gives almost native performance, so emscripten is viable for compiling codecs. The only issue is potentially very large .js files, so you want to only compile the parts you are using.
Unfortunately, it isn't currently possible to access browser codecs directly from JavaScript for encoding. The only way to do it would be to utilize WebRTC and set up recording on the server. I've tried this by compiling libjingle with some other code out of Chromium to get it to run on a Node.js server... it's almost impossible.
The only thing you can do currently is send raw PCM data to your server. This takes up quite a bit of bandwidth, but you can minimize that by converting the float32 samples down to 16 bit (or 8 bit if your speech recognition can handle it).
Hopefully the media recorder API will show up soon so we can use browser codecs.
This is not a complete solution, #Brad's answer is actually the correct one at this time.
One way to do it is to compile Opus to Emscripten and hope that your PC can handle encoding using JavaScript. Another alternative is to use speex.js.
We are currently planning a website on which people can upload movies. When looking at YouTube you notice that some movies are uploaded twice or more times (by different users). To scale our application we're thinking about the following idea:
User selects movie file to be uploaded
A JavaScript will get the SHA256 hash from the file (it's more accurate then the MD5 hash) before it get's uploaded
The website will check if the hash already exists
If the hash doesn't exist, the file will be uploaded
If the hash does exist a message will be prompted or a reference to the already existing version on the server will be created. This without the video being uploaded.
Q: How do we analyze a file with JavaScript in order to get the SHA256 hash, and is SHA256 good enough or should we consider SHA512 (or another algorithm)?
Use the HTML5 File API to read the file: http://www.html5rocks.com/en/tutorials/file/dndfiles. Here is a JS code for calculating SHA-256: http://www.webtoolkit.info/javascript-sha256.html
I must add that I never tried this, but it seems to be possible. Alxandr is right, this would take very long for large videos, but you may try to use the WebWorker API in order not to freeze the browser: http://html5rocks.com/en/tutorials/workers/basics
Putting files aside for now, if the question is actually whether it's possible to get a SHA-256 hashes in JavaScript, the answer is yes. You can either reiplement this yourself (bad idea) or use a library like the Stanford JS Crypto library (good idea).
As far as the File API goes, it is implemented in the bleeding edge version of every major desktop browser, as well as the latest Android browser shipping. iOS is not supported as it doesn't really have a filesystem. Check out caniuse.com for the latest stats.
Simple answer, you can't. That is if you want to support all browsers at least. I think both Chrome and FireFox supports the reading of files on the client, and IE supports it with the help of ActiveX controls, but to get a solution that works in all browsers you have to use a plugin like Flash or Silverlight. Also, when doing file-uploads of video-magnitude (large+ files), I think going for flash or the likes from the start is a good idea anyhow, but that's just my opinion.
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.
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