{"id":1894,"date":"2019-12-06T15:41:53","date_gmt":"2019-12-06T07:41:53","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1894"},"modified":"2020-05-12T14:01:44","modified_gmt":"2020-05-12T06:01:44","slug":"how-to-use-python-3-to-convert-your-images-to-base64-encoding","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-use-python-3-to-convert-your-images-to-base64-encoding\/","title":{"rendered":"How to use Python 3 to convert your images to Base64 encoding"},"content":{"rendered":"

When you encode your images in Base64, your images can be transferred and saved as text. <\/p>\n

Although there will be a 37% bloat in space requirements, it can be useful to encode images in Base64.<\/p>\n

For example with SAP HANA XS Advanced, you can quickly build an OData service to receive images via JSON.<\/p>\n

Given that, let's see how we can encode an image in Base64 encoding with Python 3.<\/p>\n

Python 3 codes to encode an image in Base64<\/h2>\n

After you had decided to encode your image in Base64, you can proceed with coding a utility function with Python 3:<\/p>\n

\r\nimport base64\r\n\r\ndef get_base64_encoded_image(image_path):\r\n    with open(image_path, "rb") as img_file:\r\n        return base64.b64encode(img_file.read()).decode('utf-8')\r\n<\/pre>\n
As shown above, it takes just 4 lines of Python 3 codes to encode an image in Base64.<\/p>\n
First, we import the base64 module<\/a> into our Python script. <\/p>\n
Once we have done so, we define a function, get_base64_encoded_image<\/code>, that takes an image path as the parameter.<\/p>\n
When we have the image path, we use the open<\/a> function to get a file object to the image that we wish to encode in Base64.<\/p>\n
If we can do so successfully, then we use base64.b64encode<\/code><\/a> on the binary data of the image file.<\/p>\n
Before exiting the function, we decode<\/a> the bytes from base64.b64encode<\/code> as a UTF-8 string and return it to the caller. <\/p>\n
How to display a Base64 encoded image on the browser<\/h2>\n
Given that you have saved the Base64 encoded image into your database, how can you display it on the browser?<\/p>\n
In order to display a Base64 encoded image on the browser, place the Base64 encoded string in the src attribute of an img tag: <\/p>\n
\r\n<img src="data:image\/jpeg;base64,\/9j\/4AAQSkZJRgABAQEASABIAAD\/2wBDAAsICAoIBwsKCQoNDAsNERwSEQ8PESIZGhQcKSQrKigkJyctMkA3LTA9MCcnOEw5PUNFSElIKzZPVU5GVEBHSEX\/2wBDAQwNDREPESESEiFFLicuRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUX\/wgARCAAyAGQDAREAAhEBAxEB\/8QAGQAAAgMBAAAAAAAAAAAAAAAAAwQBAgUA\/8QAGgEAAgMBAQAAAAAAAAAAAAAAAgMBBAUABv\/aAAwDAQACEAMQAAABYLBhTqkwhL5yh8wiyIlUG1RO1bQxCBE8gmJpCLSLykdjPz7p90aWc9\/FYvo0ktcDV5bzoio4GlxAkFheVoOGUxPMcvUzYWZCVxm1ii\/j3AWSx\/SUFHHsZqLDGdfas02IUURcwXUeWZsjs4N0VmihqCaF0S4iQmwOXZsOAkow3m9maRm4arcckBobVxkfExCL6GHHFRF0fG7FAbYXTpgiz0MnM3Yjp7p6JkLiuRPum0D3TWZrM1kv\/8QAIhAAAgICAgICAwAAAAAAAAAAAQIAAxESBBMQIRQgIiMx\/9oACAEBAAEFAuuudSGdCzVcdaxkOVSa+GB3atZ1JOquZENgEDZlvI64L7BPkuZVdtA+wsvRItmzVWFjnwbR2fi73FlRlJGAsMrJBD5ltJsJDAcYqK\/TQ5yABNmSV7XBk1j1Zg9wJ7LESqzYcrCp66qHbpZWY65tIEV7ale1jXbjqGZVtGcZqGEZ7GOuUV3rVP4grBZq8\/rMXEPGEFVkPHsnxovHCg1WToZYa1mtf12M3abtMzZpk\/T\/xAAuEQACAQIEBQEHBQAAAAAAAAABAgADEQQSITEFEyJBUaEUFSAjUmFxEDJigZH\/2gAIAQMBAT8B+ZaUadR+8alUBtpGw9fe0ZKqatKVNqguI2HqDcTllD1z5f7stx+ZycAtIVG0v9zGYZ+naWci4hNWU6LscrrKWFRZXqpS6b6wpzGzmGmp3goqNph2IbI20xdJLaywC5FEyWGs5GbaZE28eYKOmpAjswuqnSe0MjabTMKzXMuJv+jSo\/MUBu0p9K7QEHWIxUkzKtUbQXQWteG95YGBCOlNZ1bPFNoYYBeGndc99oaap\/c7zCqCD9pXYM5ImayzNA8WJo1hLx7CCO9qVvJgt5l9YrlTdDDppKvCqlultYnBjbqf0nuj+fpKnC7ah\/SNXCnLeKwqHSDC1uy+ogwuI+mVTkvn0MpMXNrRMFWftb8z3ZW8iDhVTuw+FqSNuJ7NR+gf5MijYSwmRfEsPg\/\/xAApEQABAwMDAwIHAAAAAAAAAAABAAIDBBESISIxBRRBUnEQExUgMkJR\/9oACAECAQE\/ATXtHlO6if1TOp+oLvxfhNq2vNgjWMa7Fykr4x+K73P8U18jtuVj7IS1LjiCoXPtvOqlqhGeV3rPUpI9bNTYiOQgxzjYKng22KDANEImA3sq2nbbKyAMb9pVPBLK75t0RYbuVU7WXTopH6g39k6MNNrqGjD4rvPsmUz2xZE6qnia2xPKB1+ATm3C7bElzQm1DI9hKFjquqCRzxbhbm8qzHAFxWWTQU4BwsVMYqfUlU9QJDYFB5XCzXPKrYCx+fgrpxkcbX2ryuosaJrqnYzC7wvGqClpopnZPUVFHHLm1NvlpwvdOAQaqphllDP4o2MY3EI6FSwxy2y8I6aBd+\/y1d6\/wF38n8C78+QmSkhSTxsF3lfUKbwUepQoVfzjsCM8LRdxTuoQ\/qLodQHpX1A+n7eEdeViPhYKw+z\/xAAnEAACAQMEAQQCAwAAAAAAAAAAARECITEQIjJBEiBRYZEDcYGhsf\/aAAgBAQAGPwLBxOyNNsF8mDBHjSzgXpMFyzjSEpqZOS7M7i5DubePyNde+mCOpGh+NhOL6Y18kJXtk\/3RwOMr+zynsTdMfJKQ3MR0WtpYjslcvcnsUm2o2EI8aWi6iqSXtbNpjSck1U2ZYa6Jbz8Gal\/JhsxV9mGTBtoSN1UF\/wAhmTbBeuP0jlX9Ga\/TlnJnJ\/emWZ9H\/8QAJBABAAICAgEDBQEAAAAAAAAAAQARITFBUWFxgZEQobHh8PH\/2gAIAQEAAT8hqnhSk8PRncs4D8QWSnkncGEGGkoNj1gKPYTEoX4hVofWfzWFN6Qz7gmQ5fSXsQaeJwFHMV8fjEq4wEK8UmIXvdG5zcrvhMdkaivOGKnKCpOB8MWoFy9GBvljGTpici\/nE4uHTDDn1lgy5\/MdYGvmEUDolXMJy3K0ZiBXoeo+cleYKGBh1zVj9IaA4xAKUi4JS1K5l+8sesAlYNw\/fBNLzaPPkJHaoGNwVVO7vcZaA9JMby7zK7hC1pl5WnBa7RJppUExfSChyeoxV0JqAMOTiP0VZutTJXFXhSy0e4de52NXMHNGOvZW4zC\/hYDHuE5ivRm+F9oTFZ+012SUPjSu58n8ZXiz7SpX0tgOvmh+wiu1gXbP9qeZ8xfoz\/\/aAAwDAQACAAMAAAAQZU\/R3xNJpXm2P6sWAUP9B2dex2h3SoYyQ0NNtz2PRi6mzX\/\/xAAmEQEAAgEDAwQDAQEAAAAAAAABABEhMUFRYXGRgcHR8BChseHx\/9oACAEDAQE\/EHWceJZ8YFtlzB0BniEUnk+ZQy\/WbMnf\/ZYgx3\/5BzVDFCH93fSplBRgyeBjFett616sLUodFx4N++kG0+0CYQuc\/p43HeXlZ9f+Rs1n3t0jXlHH+Zx0\/GgaMsxlzDimuhCq7yvmr+IddlXSp41\/2+Ia675PTTb44jtvVP3Ckh7Y043x2Zmbp2t++mk0jS7KKrv204gCkvZDvKbQEWd3J93lqrVrzjfxz+GIRr44JSLjWHrKBkbZDHGeG\/SEUZpKjrZ0bF9amIhumPf27TRGbnVHioImPVKCfyub36x8Bty1+6zOO0d71eLgs2fE3BBa7Sy6UviVFpseYnUq\/XfrEbxSKlw2vkDxvA8lnm5jZj6gsYuiaLPUY\/uPDC\/wfJY0cYfXMfZjnL9PtFeStyVBW+PiMLF+nMWLj3T2uLmA6FLbjeq0gINWZ2nc+LhXjzvxFFi9F9yCy\/xRMkb3BlLZ4HxDTB6R4IpqPEq2gEIM\/8QAJhEBAAIBAQcFAQEAAAAAAAAAAQARITFBUWGBkcHwcaGx0eHxEP\/aAAgBAgEBPxBBS\/L8PmL09a+pYVkilldP2ZQdGLgeX97QG7cxl6Cp9L+4uWIXkJyrvGi7OB9TH27WkoLetQL6wcv4SgvenjulsWecusrXp5cC7HqdnvAq4JTGW+CrwvP3AynKOrTjpoVpm4nwm2Ok2N++y72S2CHX3c49Bxvw9JmgU0Yx3viQ0vg2FeekQDlqbumy4AggrNUJBiDB4PaV9bTFOOekSZ2OjMkMcVpe2K9YfneYhFPHzbBaCPtuiwrEiuoaxqppviZOl0+XAUVcVycxoSiDMNwtrAaVj8mSpDpModYUjVzscbIUXkNXCwqmN37LCYBo3QYchHSoQXcWiiaaQW9YJXSJtYmhwS1BoOUzUScPM+0TKMONsD19yDtHya+4RXFzBiejDeHKAaBeX3UAdLe1fSINH5sg0EHm+f0vyOxPX8lsv\/KILonr\/WA6BEJwpRslQgz\/xAAlEAEAAgIBAwQDAQEAAAAAAAABABEhMUFRYXGBkcHRobHw4fH\/2gAIAQEAAT8QeunS3MGoXm2X7uSCwEcrb7wAoL4ULKQDlV9QSwVmgAqJUV43OmLyMHmUX7WU89blRBaGOL6VFlDmD\/U7T+O8AMm+830O\/aBHM0WPrV14lBbEvJpO0Q88DIZIevaUA0DdxleGB3wgfpCUboDZ67lnb8DGYyIUyFr6iP1wHkh\/MYtTYYa1isOf5jZgoXTKTkLwQjboczkN+IRjF5694s2dynDkIHgXZmrvz1iTBK2UGmbNbhwBu2GkiMomhiKSiqlZO5iP5N04prHHPMuPxThvrCxmTYFravpiZ3BnPF\/WYASpWrcxKIeVN\/mFkh03k+MwqGYDauktoTrA\/wBVnFl\/9h1m3XNG83NQ3K9l9cdqmSHV4Q4iguGAVdwFRKpoQ1\/eJUSm0YEPmKgRW27YRpaC4a+6+JrIEKZ5\/cUMbt4FX334lSNux7avfiZEnJZXtvB4iUiAZAZE9av\/AGUf3SFKljQeh7wfUaK3D+QZe0qfjsRRqCnZ0L8TLRGyDs\/MsQ7aXT45iXVULKTh9rvpGGO6gOKGs6lZdUWfwRvilJfJQblEtuz\/ADBjocAH6itdVhufqWh15q\/MUqu4E\/NES+irLDSTZFryh18CfccUrV6684lptbobgv014qqERej2lOhDEA0vvMADwoVwPrgtGd0yzebzAigzs4qZXyojtfeK3ALon\/\/Z"\/>\r\n<\/pre>\n
When you access the above HTML codes with your browser, you will get the following image:
\n<\/p>\n
If you wish to display a different type of image, swap the MIME type.<\/p>\n
For example, if you wish to display a png image, you will change:<\/p>\n
\r\nimage\/jpeg\r\n<\/pre>\n
to<\/p>\n
\r\nimage\/png\r\n<\/pre>\n\n