I want to save my generated canvas to tiff file, so after that I can save as for example name.tiff
You can do that with the following library: canvas-to-tiff.
The api is pretty straight forward, just bear in mind that the *.tiff file that is generated from the canvas is very large in size.
It's a 100 times (yes, one hundred) larger than an equivalent *.png file.
Related
I receive a base64 encoded response from the api, which has huge no.of characters (data). So i want to scale/reduce the size of this base64 image. What's the best way to do that?
Well, base64 is just a text representation of some bytes.
First, you need to transform it into the buffer with bytes. E.g. like this:
const imageBuffer = Buffer.from(yourString, 'base64');
Then you should either save it on a disk and use some other tools like imagemagick to transform it:
fs.writeFileSync('your-image.png', imageBuffer); // in case you know it's PNG, ofc
// transform somehow, probably invoking third-party tool using child_process.execSync
Or you may use libs like Sharp to optimize the image in that buffer. Here's an example from the repo:
sharp(inputBuffer)
.resize(320, 240)
.toFile('output.webp', (err, info) => { ... });
Depending on the type of the image you manipulate and on the transformations you're trying to do, you may need different tools, not only Sharp, but also Gifsicle or Guetzli.
Years ago my team created a small CLI tool for optimizing images for our needs. The tool does not solve your problem, but maybe its code, where we work with different encoders, can help you somehow:
https://github.com/funbox/optimizt/blob/master/lib/optimize.js
I have image urls in JavaScript and am trying to save them all onto a single PDF file. I am using jsPDF (JS library to generate PDFs) but it can only take images as .jpegs. Unfortunately the images I have are .ashx. Is there I way I can get convert the .ashx to .jpeg via JavaScript client-side?
Examples of image url:
http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=3849&type=card
http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=2923&type=card
http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=36037&type=card
Not possible. javascript cannot manipulate binary content. There's no client-side Javascript support for doing image manipulation.
I am browsing the deck.gl repo. It ships with some examples with text files, for example this one. These files have a .txt extension, but aren't plain text:
!OohmwFjqwbMg#[?ADKJYXF#^?N?FAD
=wnmwFvvwbM_#WNg####C?C_#UA?AD#?Of#_#UTu#??BK?A??FUVP?#JF?AVP?#JF?AVPGTA?EL#?
=urmwF|swbM_#UFS##BK?C#C#A#E?CIGA?GE?CIGA#CF?#ABA#CJ##GR]Ud#wA\T?#DB?AXP?#DB?A\T
<aymwFnvwbMaAOKCA#OKPk#CCDKAADKAADKAADKAADKAAL_#fBjAIVCCEL
The examples also contain JavaScript files that look as though they are used to decode these files, for example this one for the file above.
What exactly is going on here? I assume this is a way of reducing the size of the data, but why not just rely on browser gzipping?
And why use a plain text extension when the file is clearly plain text? And why have a custom decoder at all?
It looks like a custom encoding that uses byte values to encode coordinates/GeoJSON features.
For example, this line from /dist-demo/data/building-data.txt:
!GqgmwFrhwbM}C}##K#IBO#IlBh#BOBMn#PHBGd#KC
is decoded using the decodePolyline() utility function into this array:
[
[0.00004,0.00001],
[40.70541,0.00002],
[40.7062,-74.01624],
[40.70619,-74.01593],
[40.70618,-74.01587],
[40.70616,-74.01582],
[40.70615,-74.01574],
[40.7056,-74.01569],
[40.70558,-74.0159],
[40.70556,-74.01582],
[40.70532,-74.01575],
[40.70527,-74.01584],
[40.70531,-74.01586],
[40.70537,-74.01605],
[40.70537,-74.01603]
]
which is substantially larger in JSON format.
So my guess would be that the main reason is to be able to use smaller data files that are still portable/cacheable. It's still line-based clear text, so it's diffable as well.
Also, these files are still compressible. I assume that a full JSON file is not only larger to begin with but also exhibits less favorable compression characteristics than this file. A quick test on building-data.txt shows a compression ratio of roughly 2:1 for gzip/deflate (139,089 bytes to 72,660 bytes compressed). The compression result for the same file in raw JSON won't be anywhere near that.
I have a tiff image stored in memory (in a javascript variable). What is the javascript or html technique for displaying this image in the browser window? Is there a "drawimage" type of function?
Native browser-support for tiff files is still pretty bad.
Wikipedia has a nice overview on browsers Image format support.
That being said; since a .tiff image is still essentially a raster-image, one could indeed convert it (the tricky part is stuff like supporting different compression-algorithms like PACKBITS, DEFLATE, LZW, etc) to another (browser-supported) raster-format (so one could feed it as a data:img-source).
There is a library called Tiffus: a client side pure Javascript imaging library to load, save and manipulate binary images.
The original project aim was was to create a plain Javascript chrome extension which can convert single/multi page TIFF image/s to BMP/GIF image (this is where the name came from).
However now it supports:
Windows BMP (no compression, RLE)
OS/2 BMP
ICO
GIF
JPEG
PNG
TIFF
and currently supports the folloing image functions:
load
save
resize
flip
invert color
Basically it works like this:
Source image downloaded as Binary Data using XMLHttpRequest with
MimeType('text/plain; charset=x-user-defined'); (future: HTML5
Canvas ImageData)
Imageprocessing using Tiffus
Desination image shown as Data URI scheme (future: HTML5 Canvas ImageData)
Note that according to the above; the author expects to use HTML5 Canvas ImageData in the future.
Hope this helps!
I want to use JSChart (http://www.jscharts.com/) to generate a dynamic chart.
It uses a <canvas> object.
Furthermore I want to save the generated Chart as an image (to put in a pdf file) on the serverside.
Is it possible to save a JavaScript generated image as jpg or png on the serverside?
Preferably the solution should work with Ruby and Ruby On Rails.
I think this uses a <canvas> object to render the charts, can't tell without downloading and it requires registration, so no. If it does, perhaps take a look at Canvas2Image, that returns the canvas as a data URL, base64 encoded image, which could be sent back to the server via an AJAX call.
You can use http://xmlgraphics.apache.org/batik/ on the server to convert an SVG. It's the method used by highcharts to convert the graph generated by the application. See http://www.highcharts.com/docs/export-module/setting-up-the-server