node-canvas: output PNG file as interlaced/progressive - javascript

node-canvas is a Node.js version of the HTML5 canvas library that depends on Cairo. My app creates a bunch of PNG files depending on that data that is sent to the app.
node-canvas offers two functions toBuffer() and toDataURL() which outputs raw PNG or Base64 encoded PNG to a string which I can send to the browser. However there is no way to add support for interlacing in the library.
I'd like to extend the functionality of the library and add support for interlaced PNGs. I have the raw PNG data in a string, and also an array of pixels for the image (if need be). I do not have an understanding of how PNG encoding works. Can someone please point me to the algorithm I need to use to convert the data I have, either the non-interlaced raw PNG data or the pixel array and convert it to an interlaced/progressive PNG?
This is a necessary step for the graphing calculator app that I am building that graphs complex equations. It would be good to have a blurry image that appears quickly and sharpens over time than a non-interlaced PNG that loads from top to bottom for my app.
Thanks!

You can't convert a non-interlaced raw PNG data to a interlaced PNG stream. Interlaced vs non-interlaced PNG are two different ways of PNG encoding (they basically differ in the pixel stream ordering, but after that a filter-compression is applied, so you can't simply alter the final stream to switch between interlaced and non-interlaced modes). TO generate an interlaced PNG is work of the PNG encoder, the one which is used to write your PNG files (or stream) from the raw image pixels.
Nevertheless, I'd advise you against interlaced images; the compression efficiency suffers (specially with PNG) and the advantage for the user experience is at least debatable. See eg. Today, interlaced PNG is seldom used.

Related

Convert svg string to png in Python 2.7

How can I convert an svg string to png using python?
I have an application consisting of a frontend and a backend (python). In the frontend I draw graphics using d3, and in the backend I eventually create a word document where I want to include the graphic I have created from d3. The api for creating the word document does not support adding svg files, only png, so I need to convert the svg to png. This I do frontend, where I draw the svg to a html canvas, and then convert to a png. However, doing this results in a poor quality png (due to html canvas), so I would want to do this server side so I can keep the high resolution from the svg.
So what I do server side now, is by using StringIO, converting the png string (base64) to a file-like object.
So my question is, how can I convert my svg (js/react) to a png, without noticeable quality loss, using python 2.7?
(I want to keep this in memory the whole time, not writing to a local file)

Abap : convert svg to png

I have an svg file and I want to convert it to image png, I am searching any class that do this in ABAP but I could not find any results.
I tried to do this with Javascript then execute it from ABAP but my code in JS should be without DOM implementation or browser functionalities to be able to run it from ABAP.
SVG is - as its name implies - a vector graphics format while PNG is a raster graphics format. Converting vector graphics to raster graphics requires all kinds of "interesting" capabilities that ABAP isn't really suitable for, for instance rendering text in (almost) any font with various attributes and modifiers into a bitmap. I would be surprised if a pure ABAP solution existed at all. It should be possible from a technical point of view, but as you might imagine, it'd be an enormous task.
That being said, you might want to try to use the IMGCONV part of the Internet Graphics Service. I'm not sure whether it support SVG, but you might want to check out the classes CL_IGS_*.
You could try doing this with a GUI attached running windows. If that's an option. The back-end server-side Java interpreter does lack a DOM, yes. But perhaps you can find a library that can do this in Java without a DOM? Should be easier than doing the bit manipulations required in ABAP.
you cannot convert an SVG into a PNG or JPEG in abap.
First of all you have to download the SVG file and open it in Paint, if you use win. Then save it as bitmap in 256 color. After that you can convert it into png files. (why? If you load the file without converting it to 256-color bitmaps, SAP may not interpret the colors well. Withe can became gray and gray can became blu)
Advice: if you want to use the image in smartforms or adobeforms or sapscritp, best way is to upload it in bitmap in se78 transaction and call it in you printouts or alv header

How to decode manually JPEG Lossless, Non-Hierarchical, First-Order Prediction

I'm trying to create a DICOM viewer on my own, using only JavaScript and HTML5. I'm working on this project for the last few days and now I successfully parse all textual information I need and I can also correctly read and display uncompressed Grayscale and RGB images. Now I'm trying to display the so called "JPEG Lossless, Nonhierarchical, First- Order Prediction" type of image (in the DICOM file, it is enumarated with the Transfer Syntax Unique Identification: 1.2.840.10008.1.2.4.70) but I'm stuck. I want to read the Pixel Data of the image manually and build the image out of it. There is no actual information on how the bits are stored in the DICOM documentation and I really tried to find a good description of this kind of JPEG on the internet but with no success. Can you give me some advice on what exactly I have to read to solve my problem. Thank you all :)
Check this document, probably it leads you into the right direction
JPEG Lossless Codec
There are also some more links which may help:
dclunie jpeg sources
FYI, the Orthanc server for medical imaging already provides JPEG Lossless decompression through a REST API, which allows JavaScript/HTML5 applications to very easily display DICOM images in Web browsers. You can for instance have a look at the DWV plugin by Yves Martel.

converting a binary raw image data in javascript

I'm using a firebreath plugin and I am sending a raw binary image data from the plugin to JavaScript, but was not able to use this data as JavaScript did not recognize this. I later converted the raw image data to base64 format and used in JavaScript in which case I was able to draw the image but performance was hit as base64 conversion took nearly 100ms for each conversion.
Is there a way where in I can draw image directly from the raw image? I Basically have to improve performance.
rather than drawing it on a canvas, you could try putting a data URI in an image tag and sending it as a jpeg. Basically compress the image as much as you reasonably (for your application) can before you send it to javascript in order to minimize the amount you need to convert w/ base64. The only other way I could see it maybe working would be to use a websocket to talk to the plugin, which has its own problems.

Convert JPEG or PNG to SVG format on VB.net/C# or Objective-C

I would like to convert a PNG or JPEG file to SVG. But I can't find anything on how to do it. The thing is I'm using devexpress reports to export it to image so the format can either be .jpg or .png. Now what I want is to convert it to SVG so that the image will still be in a better quality when passing it through Javascript and finally to Objective-C.
To explain a bit further.
I have a service which is coded using VB.net. This is server side; client side is Javascript and HTML: I'm using Phonegap to bridge Objective-C. What I'm doing really is creating a plugin which would pass a URL from Javascript and have Objective-C catch the url, then load it as an image and pass it to the ePOS SDK to print as an image.
What I noticed is that when I'm exporting the report using devexpress as a png, the image gets pixelated and a bit grainy because I'm scaling the image to make it bigger to fill the thermal paper (80mm). That's why instead of PNG I want it in SVG to preserve the quality of the image.
My question is where should I convert the image? On the server side or in Objective-C? And how will I do such a daunting task? I was thinking of doing it in Objective-C, but I think it is much better to convert it on the server side. What do you think?
Also is it possible to convert .png or .jpeg to a .svg file?
Thanks
You could do it on the server side with ImageMagick, but I think that since you'll be converting a bitmap image to vector graphics, you'll just get the same low-quality crap. Can you export your reports to PDF or another vector graphics format?

Categories