0

We have a document library with images.

The end goal is to convert the image to base64 and store it in a custom column.

There are more than 700 images in the document library that need to be converted to base64 to be used in pdf with jspdf plugin , However doing it manually would be time consuming.

The below javascript function that works as expected

function getBase64Image(dLogo) {

  var canvas = document.createElement("CANVAS");
  var ctx = canvas.getContext("2d");
  ctx.clearRect( 0 , 0 , canvas.width, canvas.height );
  ctx.fillStyle="#FFFFFF";
  ctx.fillRect(0 , 0 , canvas.width, canvas.height);
  var img = new Image();
  
  img.crossOrigin = 'Anonymous';
  
  img.onload = function(){
  
   canvas.width = img.width;
   canvas.height = img.height;
   ctx.drawImage(img, 0, 0);
   
   var dataURL = canvas.toDataURL("image/jpeg");
   //alert(dataURL);
   //return dataURL;
   document.getElementById("Base64").value = dataURL;
   canvas = null;
   
  };
  
   img.src = dLogo;
}

Also created a PowerAutomate flow , However the base64 URL generated is different when compared with the one generated using javascript function and is not working with Jspdf.

Base64(Using Javascript) data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQg

Base64(Using MS Flow) data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAu8AAAHPCAIAAABspaOtAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3

Would appreciate if anyone here could let us know how these images could be converted to a workable base64 string and stored in a custom column against every image.

Thanks in advance

0

I convert image to base64 format with the following code:

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>

And flow do the same thing, the base64 string is the same. enter image description here

1
  • Thank you for the help , in place of file input please use textinput and pass the url of the file , the base64 URLs would be different
    – Vivek
    Feb 18 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.