I have a base64-encoded jpeg string that I'm holding in state in React. I've been trying to work out how to convert it to a png format base64 string browser-side.
I briefly looked at sharp, but I found that requires a server side node.js environment. I don't really want to have to write my own conversion script. Further searching on npm hasn't yielded anything for me.
Any help with this is very much appreciated.
This is untested, but you should be able to set the base64 JPEG as the source of an image, then draw that image to a canvas using context.drawImage; once it's on a canvas, you can use canvas.toDataURL() to get a base64 PNG of it.
Related
Hi is there a way to use https://threejs.org/ for Image processing?
Convert raw image from camera and phone camera to compressed JPEG
Resize images and save as compressed JPEG
three.js is probably not the right library to use for that sort of image processing. I would start by looking for a JS library that reads RAW image files from cameras, like dcraw or raw-decoder, depending on what input formats you need to support. Then compress the data with a dedicated compression library like sharp or mozjpeg-js.
I have an application that requires I convert a PCX graphic to binary. There is very little info on the internet on how to do this. I can accomplish this with canvas.toDataURL using JS but only for PNG and JPEG graphic files. This is not for a SQL database as I think you can do it there. Any help would be appreciated, even if it involves using an app to get me there.
I have no idea what you mean by your question, but I presume that if you can do whatever it is that you want with a JPEG file but can't do that with a PCX file, it would help if you could convert your PCX to a JPEG.
So I would suggest you use "convert" from ImageMagick (here)
convert image.pcx image.jpg
Here is a text file:
This is the first line
You can read me, con't you?
Yes, it's because I am text
Here is a binary file:
<FF><D8><FF><E0>^#^PJFIF^#^A^A^A^#^A^#^A^#^#<FF><DB>^#C^#^C^B^B^B^B^B^C^B^B^B^C^C^C^C^D
^L^R^S^R^P^S^O^P^P^P<FF><DB>^#C^A^C^C^C^D^C^D^H^D^D^H^P^K ^K^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P^P<FF><C0>^#^Q^H^A<90>^#<C8>^C^A"^#^B^Q^A^C^Q^A<FF><C4>^#^]^#^#^#^G^A^A^A^#^#^#^#^#^#^#^#^#^#^#^B^C
^D^E^F^G^H^A <FF><C4>^#8^P^#^A^C^C^C^B^E^B^D^F^C^#^B^C^#^#^A^B^C^Q^#^D!^E^R1^FA^G^S"Qaq<81>^T2<91><A1>^H^U#B<B1><D1>R<C1><E1>^V<F0>3br<FF><C4>^#^Z^A^#^B^C^A^A^#^#^#^#^#^#^#^#^#^#^#^B^C^A^D^E^#^F<FF><C4>^#/^Q^#^B^B^A^D^A^C^
Is there any way to determine if a JPEG file is corrupt after reading it via the FileReader API in JavaScript?
I'm thinking about something like what "libjpeg" does. It provides warning messages if something is wrong with the JPEG file.
There are some libraries which do JPEG decoding in Pure JavaScript.
E.g. https://github.com/notmasteryet/jpgjs (there are others)
You can simply decode the FileReader fed data in your JavaScript code and see if the output is sane.
Depending of the degree of corruption, what cases you want to trap, it should be possible on client-side.
How can I create a Zebra GRF image from HTML5 canvas pixel data or a monochrome BMP file using javascript? I can't find any information on the format of GRF files.
Here is the ZPL programming manual.
The ~DG command will tell you the format of the GRF format. Then it's just some math
You might have to convert this Java code to Javascript, but I came across this and make a command line java app to help. If you can go to the server at all, then you could probably just invoke this app through shell.
https://github.com/asharif/img2grf
I see an example where the data was in text inside an array, i seen another where someone loads the model through ajax with json.
Is there a way to load the files via binary? i dont feel like loading a 1mb model via 4mb json
It is certainly possible to load binary files.
http://blog.nihilogic.dk/2008/05/reading-exif-data-with-javascript.html
But the problem is after that. That you need to know what format it is in. And extract everything from there.
You can use jQuery Binary Ajax, or for new browsers, ArrayBuffer
If file is compressed with gzip then json size is almoast same as binary file size.
Anyway you can use binary loader from three.js if you really need it.