How to convert my image already displayed in div into base 64

Question

This is my url:

https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01

I am trying to convert image shown in my div into base64.

I am also trying to convert image from get request XMLHttpRequest of image.

.

I have checked the answer 1 of this question

I am unable to convert http.get image into base 64

I have also checked the answer 2 of this question

How to convert image into base64 string using javascript

.

<div id="imgdiv">
    <img id="img" src="https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01">
</div>

<script>
    //something like this
    var imgbase64data = base64_encode(document.getElementById("imgdiv").img);
</script>

the get request does not show anything from my given url.

But with this online converter it converts

https://www.askapache.com/online-tools/base64-image-converter/

.

If I use <img src=""> tag and put this url, the image shows up.

Is it possible to convert displayed image into base 64. btoa() or any way.

Possible duplicate of [How to convert image into base64 string using javascript](https://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript) — Twisty, Jun 19 '19 at 02:50
i have tried it but it does not work with my url please check — Danial212k, Jun 19 '19 at 02:51
i have written in my question that ` How to convert image into base64 string using javascript` this solution does not work — Danial212k, Jun 19 '19 at 02:52
https://www.sitepoint.com/community/t/converting-images-to-a-base64-data-url/282947 is this helpful? there is svg i want img — Danial212k, Jun 19 '19 at 03:11
There is an answer with over 700 upvotes that has 3 different approaches. You're telling me none of those work? None of those directly address your question? — Twisty, Jun 19 '19 at 03:46
ofcource you can try that 700+ vote answer and put my url and then tell me if it works. I have used that way already it does not work — Danial212k, Jun 19 '19 at 07:53

Twisty · Accepted Answer · 2019-06-21T17:09:06.997

All the solutions can work, yet I think the issue is discussed here: CORS errors trying to convert remote image to base64 data

Consider the following code:

$(function() {
  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();
  }

  var imgUrl = $("#imgdiv > img").attr("src");
  console.log("Img Url: " + imgUrl);
  toDataURL(imgUrl, function(dataUrl) {
    console.log('RESULT:', dataUrl)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgdiv">
  <img id="img" src="https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01">
</div>

When I test this it works, to a point, and then generates an error:

Img Url: https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01 js:31:11
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

If you have access to Server-Side Scripting, like PHP, this could be done in a snap.

Update

If URL data grab won't work for you then you must use Canvas method: CONVERT Image url to Base64

$(function() {
  function getBase64Image(img) {
    var canvas = $("<canvas>");
    canvas.width(img.width());
    canvas.height(img.height());
    var ctx = canvas[0].getContext("2d");
    ctx.drawImage(img[0], 0, 0);
    var dataURL = canvas[0].toDataURL();
    return dataURL;
  }

  function clearData(sStr) {
    return sStr.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
  }

  var imgUrl = $("#imgdiv > img");
  var imgSrc = getBase64Image(imgUrl);
  var imgBase = clearData(imgSrc);
  console.log("Img Url: " + imgUrl.attr("src"));
  console.log("Img Src: " + imgSrc);
  console.log("Base64: " + imgBase);
  $("#imgdiv").after("<img src='" + imgSrc + "'>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgdiv">
  <img id="img" src="https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01">
</div>

This provides the following response:

Img Url: https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01
Img Src: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=
Base64: iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII= js:33:11

Update 2

You can try using an API and see if you can have it convert the image for you.

$(function() {
  function postToForm(url) {
    $.post("https://www.askapache.com/online-tools/base64-image-converter/", {
      http_remote_url: url,
      http_compressimage: 1,
      TF_nonce: "4bd57a0b93",
      _wp_http_referer: "/online-tools/base64-image-converter/",
      aatoolstoken: "1fe4rpn"
    }, function(resp) {
      console.log(resp);
    });
  }

  var imgUrl = $("#imgdiv > img").attr("src");
  console.log("Img Url: " + imgUrl);
  postToForm(imgUrl);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgdiv">
  <img id="img" src="https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01">
</div>

Again, this may encounter CORS issues and it looks like the site uses Tokens to help prevent abuse of their API.

If your web server supports Scripting, you may consider making your own API that you can use to convert a Image URL to Base64 data.

the question is to convert already displayed image to base 64, not to from get request. because get request doesnt work with my url, and i dont have access to the server, i am remotely accessing it through my code — Danial212k, Jun 19 '19 at 08:04
@Danial212k I've updated my answer. You may want to consider how you respond to people or they may not want to help out in the future. — Twisty, Jun 19 '19 at 16:18
put this Img Src: data:image/png;base64,iVBOR... in `img tag` and tell me if you get the same image of which i have provided the link in my question. it should open isn't it? — Danial212k, Jun 20 '19 at 15:46
You will want to change it to `image/jpeg` if needed. This produces another base64 string. Loading it back into an `` or using an encoder still does not produce the results you're looking for. I've tried a bunch of alternates yet they all encounter CORS issues, so testing fails. — Twisty, Jun 20 '19 at 16:48
@Danial212k updated again, I think with this image, Google API is manipulating the image somehow. When I try and convert it to JPG it comes back a smaller size, but all black. If PNG, same smaller size but transparent. — Twisty, Jun 20 '19 at 16:54
what should I do with this answer if it is not giving the img src which i can open it in url to show exact image as in given url. how this website does this job: https://www.askapache.com/online-tools/base64-image-converter/ — Danial212k, Jun 21 '19 at 04:00
I understand that there is CORS issue but that website also does this work done, why we can not do like that? — Danial212k, Jun 21 '19 at 04:02
@Danial212k I suspect the website uses curl (via server side PHP Scripting). Their form says: `
` So they POST the URL to a script that then gets the Base64 data server side. I had already advised that this would be a better method in my answer. The answers that you have been directed to are what you can do in JavaScript (Client side). You can try and see if there is a better JS Library, but I do not know of one. — Twisty, Jun 21 '19 at 16:53
thank you @twisty for your consideration, I really appreciate it. the update 2 also did not work, and I read your comment, sure will find some way or other way round. Thanks again! — Danial212k, Jun 21 '19 at 19:26

How to convert my image already displayed in div into base 64

1 Answers1