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.

There are multiple approaches you can choose from:

1. Approach: FileReader

Load the image as blob via XMLHttpRequest and use the FileReader API (readAsDataURL()) to convert it to a dataURL:

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

This code example could also be implemented using the WHATWG fetch API:

const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))


toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
  })

These approaches:

• have better compression
• work for other file types as well

Browser Support:

• http://caniuse.com/#feat=filereader
• http://caniuse.com/#feat=fetch

Tip: To convert local files, you can use live-server. Once started on the folder that contains the picture to transform, open the url in browser and using developer console you can convert the image to base 64.

2. Approach: Canvas (for legacy browsers)

Load the image into an Image-Object, paint it to a nontainted canvas and convert the canvas back to a dataURL.

function toDataURL(src, callback, outputFormat) {
  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.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

toDataURL(
  'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
  function(dataUrl) {
    console.log('RESULT:', dataUrl)
  }
)

In detail

Supported input formats:

image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp, image/xxx

Supported output formats:

image/png, image/jpeg, image/webp(chrome)

Browser Support:

• http://caniuse.com/#feat=canvas

• Internet Explorer 10 (Internet Explorer 10 just works with same origin images)

3. Approach: Images from the local file system

If you want to convert images from the users file system you need to take a different approach. Use the FileReader API:

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}

<input type="file" onchange="encodeImageFileAsURL(this)" />

Having

<input type="file" id="picture">

You can add an event handler to it listening to the change event (this code has to come after the above HTML or be registered on the DOMContentLoaded event)

var input = document.getElementById('picture');
input.addEventListener('change', handleFiles, false);

Then your handleFiles event would draw the image into a canvas and extract the base64 string from the file:

function handleFiles(e) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  var img = new Image();

  img.onload = function() {
    ctx.drawImage(img, 0, 0);

    var base64 = canvas.toDataURL();
    console.log(base64);
  }

  img.src = URL.createObjectURL(e.target.files[0]);
}

Running example bellow:

var input = document.getElementById('picture');
input.addEventListener('change', handleFiles, false);

function handleFiles(e) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  var img = new Image();

  img.onload = function() {
    ctx.drawImage(img, 0, 0);

    var base64 = canvas.toDataURL();
    document.getElementById('result').value = base64;
  }

  img.src = URL.createObjectURL(e.target.files[0]);
}

textarea {
  width: 350px;
  height: 100px;
}

<input type="file" id="picture" />
<br /> <br />
<textarea id="result"></textarea>

This looks like it's a combination of already answered questions. You need to ungzip the string and then convert from string to image. When dealing with problems like this it's best to break it down into the smallest chunks you can. That way your searches will yield more applicable results if you can't find your exact issue.

JavaScript implementation of Gzip

Javascript Hex String to Image

If you want a dataURI version of your image, the best way is to set the XHR.responseType to "blob", and read the resulted response blob with a FileReader :

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(){
  var reader = new FileReader();
  reader.onload = function(){
     img.src = this.result;
     result.textContent = this.result;
    };
  reader.readAsDataURL(this.response);
  };
xhr.open('GET', 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
xhr.send();

<img id="img"/>
<p id="result"></p>

Of course, you'll have to make the call to the same origin, or to an open server (such as wikimedia one).

If you attach an event listener to the file input, you can then recognize text once the file has been loaded successfully, like so:

<html>
<body>

<input type="file" id="myFile" name="filename">  
<br><br>

<label><b>Your Converted Text:</b></label><br><br>

<textarea cols="30" name="original" rows="10" style="width: 100%;" id="convertedText">
</textarea>

<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

<script>  

    var myFile = document.getElementById('myFile');
    myFile.addEventListener('change', recognizeText);

    async function recognizeText({ target: { files }  }) {
        Tesseract.recognize(files[0]).then(function(result) {
            console.log("recognizeText: result.text:", result.text);
            document.getElementById("convertedText").value = result.text;
        });
    }

</script>
        
</body>
</html>

Try utilizing XMLHttpRequest() set responseType to Blob , use FileReader() at XMLHttpRequest onload event to read response as data URI

var xhr = new XMLHttpRequest();       
    xhr.open("GET", "/path/to/local/image/file", true); 
    xhr.responseType = "blob";
    xhr.onload = function (e) {
            console.log(this.response);
            var reader = new FileReader();
            reader.onload = function(event) {
               var res = event.target.result;
               console.log(res)
            }
            var file = this.response;
            reader.readAsDataURL(file)
    };
    xhr.send()

Intercept the submit event on the form, and read the data there. You can abort submission if you want, and just keep the data locally.

Convert svg string to base64 and add base64 string to json as property. Look at example: https://jsfiddle.net/wLftvees/1/

var decodedJson = {
    img: 
"PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB"+
"ZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u"+
...
"NSw4LjU5NS0wLjA5NSwxMC42ODIsMS45MDMiLz4NCjwvc3ZnPg0K"
};

document.getElementById('image').src = 'data:image/svg+xml;base64,' + decodedJson.img;