Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Base64 value to export image in headers

Resolved
Ravi Kumar asked on November 17, 2020

Hi,
I need to export image in headers, and used base64 value of the image. But it is not getting rendered in the exports header.
Please check the below code and attachment for the image.

HTML:
<img style=”height:45px;width:45px;”
src=”data:image/png;base64,Li4vLi4vLi4vLi4vLi4vYXNzZXRzL2ltYWdlcy9wcmludC5wbmc=”></div>
 
Base64 Conversion:

getCompanyLogoImageBase64(): any {
        this.Base64Url = null;
        const file = new Blob([‘../../../../../assets/images/print.png’]);
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            this.Base64Url = (reader.result).toString();
            console.log(‘this.Base64Url’, this.Base64Url);
            return this.Base64Url;
        };
        reader.onerror = () => {
            return this.Base64Url;
        };
    }

 
Please check the conversion whether it is appropriate or not and provide any solution to render the image in export headers.
 
 
Regards,
Ravi

Attachments:
print.PNG

4 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster November 17, 2020

Hi Ravi,
 
Since base64 image encoding is not provided as a part of Flexmonster functionality, we can provide you with a couple of suggestions we have found on the web instead: 
 

  1. https://stackoverflow.com/questions/32833797/convert-local-image-to-base64-string-in-javascript
  2. https://base64.guru/developers/javascript/examples/convert-image
  3. https://www.w3docs.com/snippets/javascript/how-to-convert-the-image-into-a-base64-string-using-javascript.html

 
We hope this helps.
 
Best regards,
Mykhailo

Public
Ravi Kumar November 18, 2020

Hi Mykhailo,
Thanks for the quick response.
Please provide any relevant example how to export image in headers, so that we can convert image to Base64 and will try to export.
 
Regards,
Ravi

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster November 20, 2020

Ravi,
 
Please see the following sample illustrating how to export an image with a ready-to-use base64 string: https://jsfiddle.net/flexmonster/hw2qtc1k/
 
We hope this helps.
 
Regards,
Mykhailo

Public
Ravi Kumar November 20, 2020

Hi Mykhailo,
 
Thank You, above solution helped us to solve.
 
Regards,
Ravi

Please login or Register to Submit Answer