0

Pretty much what the post says. I don't want to use an async option and can't seem to find any out of the box cloudinary transformation that will do something like cloudinaryImg/transform_toBase64,w_20,h_20/123.jpg (this is an example). This also needs to be on the front end.

Also most of the javascript options seem to only do async.

Taylor Austin
  • 5,407
  • 15
  • 58
  • 103

1 Answers1

1

You can generate the base64 of the image using its URL. Here are some resources -

How can I convert an image into Base64 string using JavaScript?

https://base64.guru/developers/javascript/examples/convert-image

Here is a simple example influenced by the one given here -


var url = 'https://res.cloudinary.com/demo/image/upload/sample.jpg';

var xhr = new XMLHttpRequest();
xhr.onload = function () {
  // Create a Uint8Array from ArrayBuffer
  var codes = new Uint8Array(xhr.response);

  // Get binary string from UTF-16 code units
  var bin = String.fromCharCode.apply(null, codes);

  // Convert binary to Base64
  var b64 = btoa(bin);
  console.log(b64); 
};

// Send HTTP request and fetch file as ArrayBuffer
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.send();
ekt
  • 101
  • 3
  • This would be an async function would it not? – Taylor Austin Jun 23 '20 at 17:30
  • @TaylorAustin In the above example, the XHR is processed asynchronously ([default behavior](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#types_of_requests)). The `onload` function _can be_ async (by specifying the `async` keyword), but in any way, it is executed only after the request has been completed. – ekt Jul 21 '21 at 18:38