-1

How can I convert an image into a string, it doesn't matter if utf or ancii or whatever. All I want to do is to take an image and convert it into text so I can store it in a text file, and then later decode it.

And yes, of course I'm doing this it with JS, and the images I'm trying to convert are all JPEG.

Julian Avar
  • 476
  • 1
  • 5
  • 24
  • What format is the data currently in? An array of bytes if effectively an array of characters, so it kind of already is a string. How are you writing the data to a file and what in that process currently isn't working? – David Jun 02 '16 at 17:16
  • Convert it to base64? http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript – Kristof van Woensel Jun 02 '16 at 17:19
  • @David as said, JPEGs, please do read the whole question. And I have no process yet since I couldn't find any answer to what I was looking for. So I just don't know how to do it! – Julian Avar Jun 02 '16 at 23:55
  • @julianavar: What data format? A byte array? Something else? Please do read the whole comment. – David Jun 02 '16 at 23:56
  • Oh! well to be sincere, I know nothing about bytes and all of that, I'm a front-end developer, if you were to answer, would you also include that in it, I bet it would become quite helpful to any other front-end developer who's wondering the same thing. Also, sorry, I did read through your comment, but as I said, I'm not used to talking about bytes and all of that, I thought you meant what kind of image was inputed. But thank you anyways :) – Julian Avar Jun 03 '16 at 00:01

4 Answers4

2

You can draw the image in a canvas, encode it to base64 and then use it as a text. Almost all languages can convert between base64 and images.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img= new Image();
img.src = "your url to image";
ctx.drawImage(img,0,0);
c.toDataURL();
//c now contains the base64 encoding of your image

the canvas can also be created dynamically and not as a part of the page. You can also wait for the onLoad event on the image.

Kristian Ivanov
  • 111
  • 1
  • 9
  • ok, encoding it seems easy enough, but how do you decode it later? – Julian Avar Jun 02 '16 at 23:58
  • 'var image = new Image(); image.src = 'data:image/png;base64,iVBORw0K...'; where data:image/..... is the string that you have gotten from the toDataUrl(). THe the image with this src is used just like any other image for rendering in canvas or appending to the DOM. – Kristian Ivanov Jun 03 '16 at 04:00
1

Use canvas..Here is the code copied from a program

function fun_nam(url,back, op){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(op);
    back(dataURL);
    canvas = null; 
};
img.src = url;

}

Some details ...

The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

Syntax: canvas.toDataURL(type, encoderOptions);

Parameters

type | Optional

  • A DOMString indicating the image format. The default type is image/png.

encoderOptions | Optional

  • A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.

Return value

  • A DOMString containing the requested data URI.

Actually we are drawing the image data with the drawImage function,Then use the toDataURL function to get a base-64 encoded image data: url. The encoding should be do only after loading the full image.Else you will get some broken/grey type image after decoding.

Akhil Vijay
  • 77
  • 8
0

You can display the image in a canvas and then convert the canvas to a blob

https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toBlob

Convert Blob to binary string synchronously

Community
  • 1
  • 1
wiomoc
  • 1,069
  • 10
  • 17
0

You can convert Image to Text data. check previous answer.

Get image data in JavaScript? https://stackoverflow.com/a/934925/5378536

But, there's CORS issue. check below issue.

toDataURL throw Uncaught Security exception https://stackoverflow.com/a/20027883/5378536

good luck.

Community
  • 1
  • 1
Yourim Yi
  • 198
  • 1
  • 5