I'm looking for a way to save/export data in a javascript array to an image (preferably tiff, but any lossless format is fine). The catch is that the resulting image must be at least 16bit (grayscale).
I've looked all over and seen many solutions for array->image (and some for reading high bit-depth images such as tiff.js), but none that write to file and preserve the bit depth that I need.
Any ideas?
Related
is there any way to encode file that has for example 2GB without "chopping" it for chunks? Because files larger than 2GB throw error that file is too large for fs. And making it smaller chunks dont work either, cause of encoding/decoding problem. Thanks for any help :)
Base64 isn't a good solution for large file transfer.
It's simple, and easy to work with, but will increase your file size. See MDN's article about this. I would recommend looking into best practices for data transfer in JS. MDN has an other article on this that breaks down the DataTransfer API.
Encoded size increase
Each Base64 digit represents exactly 6 bits of data. So, three 8-bits bytes of the input string/binary file (3×8 bits
= 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits).
This means that the Base64 version of a string or file will be at
least 133% the size of its source (a ~33% increase). The increase may
be larger if the encoded data is small. For example, the string "a"
with length === 1 gets encoded to "YQ==" with length === 4 — a 300%
increase.
Additionally
Could share what you're trying to do, and add a MRE? There are so many different ways to tackle this problem, it's hard to narrow it down without knowing any of the requirements.
I have an image stored as a png (I could convert it to bmp too). I want to open it in JavaScript and get the raw RGB bytes. It is enough if this works locally in Chrome. So I open ./index.html in the browser which loads an image in the same directory, e.g. with <img src=myimage.png>. However, I need the proper original data, without any compression or artifacts. I can't use NodeJS.
I saw a similar question, Get image data in JavaScript, but it requires that the image is hosted somewhere. I'm also not sure how to get the raw RGB bytes, the results I got from trying those examples looked like they were still encoded as png.
EDIT: As one of the answers to the other SO question mentions, a canvas will re-encode the data and reading from it won't give me exactly the same values as in the original.
I've been researching ways to retrieve orientation information from a JPEG file in pure JavaScript.
An excellent way to get this information is outlined in this SO answer. Essentially one reads the entire file using readAsArrayBuffer and then processes it for the required information.
However, is it really necessary to read the whole file to retrieve EXIF information? Is there an optimization whereby one can read a subset of bytes when doing this?
For instance, this SO answer seems to suggest the first 20 bytes are good enough for the job. However, the former answer's writer himself asserts that he removed the slice statement because sometimes the tag came in after the limit (he had originally set it to 64KB, i.e. reader.readAsArrayBuffer(file.slice(0, 64 * 1024));)
So what's a rule of thumb one can use when programming this sort of a thing? Or does one not exist at all? I want to write code where performance doesn't get heavily affected by the size (in bytes) of file uploaded by a user. That is my goal.
Note: I've tried Googling this information as well, however haven't found anything meaningful.
Till a more seasoned expert chimes in, I've settled for reader.readAsArrayBuffer(file.slice(0, 128 * 1024));.
I need to alter the palette data in PNG images using JavaScript. I would like to do this without using WebGL and drawing to canvass, since this can be... inefficient, and cause slowdown. However, I'm not experienced with working with data compression and I know PNGs use compression.
I have three questions. One, do I need to fully decompress the image, or is it possible to only decompress parts up to the PLTE chunk(s) then re-compress the image?
Two, can JavaScript even work with raw binary data, or will I need to get really creative with base64 and string manipulation?
Third, since I'm working with palette and not truecolor images and so don't need to handle IDAT chunks... are the previous chunks actually compressed? Is this going to even require me to decompress the image?
This question already has answers here:
Possible to compare two images in Javascript?
(3 answers)
Closed 10 years ago.
I need to compare an image with various images, and do something if they're equal (I don't need any image recognition whatsoever, I just need to compare two 100% perfectly equal images), well, by searching on stackoverflow I concluded that my best bet would be encoding my image to base64, and then comparing the string with another string.
I need to compare an image with another image, then another image, then another image and so on, stopping whenever I find a perfect match. My plan is to store every 64 string in an array, then compare the target image which each item, the plan is great, in theory, however something worries me, the length of the string is 852754 characters, that means it will be very, very slow. Are there any alternatives ways of doing that?
I would even be willing to save the images in my computer, if that would help anything, there are about 200 or 300 of them, it's not that much.
This can be done by hashing the string (of course, the entropy here might be a problem given the 852754-length string) with something like an MD5 implementation. You could also conceivably use checksums (something like a crc32 function) which ought to be faster.
Use your favorite method for generating a hash and after you generate a couple, simply compare hashes (which will be much faster).
This is why we have one-way hashing algorithms! You should find a library to hash the image data (e.g. md5). You can store these easily and compare quickly.
When you have an md5 match you can then compare the data just to be sure (it's possible but very unlikely that there are collisions giving false matches).
If I well understtod your question : you can use getBase64Image() method on a var myimage = new Image() element