Huffman coding for an image using javascript - javascript

I need to get the Huffman coding for the <img> in html, I have a JavaScript function that generates Huffman coding and it takes a string as input, so I need to convert the image in the <img> into a string somehow, get the Huffman coding and output it in the html.
My problem converting the <img> to a string, I've searched a lot but I still don't know how to proceed

You can use a canvas like this
How to get base64 encoded data from html image
Ultimately you need the image converted to base 64, Which can either be done server side or client side if supported
http://en.wikipedia.org/wiki/Data_URI_scheme
You can then huffman encode the base 64

Related

Working with characters based on their UTF-8 hex codes

I'm working on something that will read a user's text messages and export them to a csv file, which they can then download. The messages are being retrieved from a third-party web interface—I am essentially using js to grab the html of each message and compiling it as needed. The content of each message is added to a variable which, once all message are gathered, is given to a new Blob, which is then downloaded.
The problem I am having is that, in this web interface, emoji are represented as images, rather than characters. Thus, when writing a message containing an emoji to a file, the result is as so:
"Blah blah blah <img height="18px" width="18px" class="emoji adjustedSpriteForMessageDisplay spriteEMOJI sprite-1f612" data-textvalue="%F0%9F%98%92" src="assets/blank.gif">"
Now, from this image, we can get 2 workable values:
The UTF-8 hex value
F09F9892
and the Unicode codepoint (I may be referring to this wrong, I don't know much about encoding).
U+1f612
Now, what I want to do is take either of these values (whichever works better), and write it to the csv file as the character itself. So that, when viewing the csv file in a text editor or what have you, it would appear as
Though I have no idea where to even start with this. Maybe it's as simple as throwing some syntax around the character values, but I haven't been able to get anything from google, because I'm not familiar enough with encoding to know what to Google.
I suggest preprocessing the data as you grab it from the webpage instead of extracting it from the string afterwards.
You can then use decodeURIComponent() to decode the percent-encoded string:
decodeURIComponent('%F0%9F%98%92')
Combine that with jQuery to access the data-textvalue-attribute:
decodeURIComponent($(element).data('textvalue'))
I created a simple example on JSFiddle.
For some reason the emoji doesn't render correctly in the result screen in my browser, but that is a font issue. When looking at the result using a DOM inspector (or copying the text into a different application), the result is shown with a smiley.
CSV file format does not have character encoding information, so Excel usually assumes ASCII.
https://en.wikipedia.org/wiki/Comma-separated_values#General_functionality
Microsoft Excel mangles Diacritics in .csv files?

Data uri's - base 64 encoding. Can you do it automatic with a javascript?

I have a question about base64 encoding for images. I used base64 for small background images. I convert it with a online base64 tool. And put it directly in the CSS file.
But is there a way. That the base64 encoding go automatic. When i upload the files to the server or when i run the website. Then the small background images in the CSS. Convert automatic to base64 encoding. Do you understand??
Thanks for help!
Well, I'm not sure if I exactly understand your question. However, the <canvas> element offers a function named .toDataURL()help, which converts the contents from the <canvas> node into a Base64 encoded string. But that does not make much sense in your case anyway I guess.
Same story for window.btoa(). You would need to ordinary transfer the images to the client and then converting them, which does not make any sense. So you would need a tool/script which runs on the server and transfers images as base64. And guess what, it exists.
supplyJS
Using supplyJS, you could create a call like
supply.listen('image/jpg', function(payload, filename) {
jQuery('<img>', {
src: 'data:image/jpeg;base64,' + payload
}).appendTo(document.body);
});
supply.setDealer('/cgi-bin/supply.pl').files({
images: [
'/images/foo.jpg',
'/images/bar.jpg',
'/images/another.jpg'
]
});
It will natively convert all images into base64 to transfer them.
Example: http://www.typeofnan.com/lab/mxhr-stream/

Is it possible to load image in byte array in javascript

is it possible to load an image in byte array in javascript instead of loading it to canvas?
I want to make an image editor in javascript webOS but I can't use toDataURl method of HTML 5 canvas because webOs don't support it ....
Javascript can only handle printable characters, so some binary values are invalid in Javascript. That being said, there are ways to encode or pack binary data using base64 or unicode. Unfortunately, I don't think there is a simple solution.

Images with Base64 Automatism - Javascript (with PHP?)

I heard a lot about Baase64 Encoding for Images in Webdesign.
And i saw a lot of developers they use it for thier headlines with: data:image/png;base64,iVBORw0...
Is there any automatism (with javascript) behind?
Or have they all converted & inserted ? (could not belive)
Example: http://obox-inkdrop.tumblr.com/ (- Headlines)
First of all, the encoding has to be done on the server-side, be it :
automated with a script, that reads the original image file, and returns the base64 encoded string to inject it into the HTML that's being generated
or by hand, and directly placed into the HTML.
The base64 encoding cannot be done on the client-side, as the goal is to avoid sending the image file from the server to the browser (to minimize the number of HTTP requests).
Depending of the language that's used on the server-side, you'll probably find some function to do base64 encoding.
In PHP, you might be interested by base64_encode()

Javascript Hex String to Image

I'll cut right to the chase. Right now I am developing a web based application. It has a PHP REST based architecture that serves up XML documents. On many of these documents attributes are hex encoded picture strings.
On the client side jQuery AJAX fetches an XML document with a picture in it. I need to display said picture in some <img> tags. However my knowledge on such methods is lacking so here I am asking for help.
Goal:
JavaScript String variable in hex or base64 >>> HTML displayed image.
Cross browser is required, or a hack for the ones that do not support it is fine.
Thanks,
Gunnar
Encode the images using base64 and write them out in a CDATA string into your XML with this format:
data:[<MIME-type>][;charset="<encoding>"][;base64],0123456789abcdefg...
When constructing your document, use this string as your src
<img src="data:image/png;base64,0123456789abcdefg..." />
Is it possible to use a php file just for rendering the image? That php file could write some base64 encoded values via
echo base64_decode($_GET['data']);
while you embed images like
<img src="http://host/yourPhpFileForDecode.php?data=base64encoded.../>

Categories