React Native

Decode Base64 Image String (GIF, JPG, etc.) and Save to File

I have an XML response that includes a base 64 encoded image string (UPS label). It's a huge string and I need to save it as a gif file on my users pc.

This example shows how to do it..

React Native

import { BinData, Xml } from '@chilkat/react-native'

function chilkatExample() {
  const bd = new BinData();

  // I created an extra-small GIF image for this example..
  try {
    bd.loadFile('qa_data/gif/xsmall.gif');
  } catch {
    console.log('Failed to load GIF image file.');
    return;
  }

  // Show GIF bytes as base64:
  console.log(bd.getEncoded('base64'));

  // This particular GIF in base64 is this:
  // R0lGODlhBQAFAMQAAAAAAP////z8/PHx8evr6+jo6OHh4d7e3sPDw8LCwpqamo2NjWxsbGRkZFpaWk1NTUtLS0hISCwsLCQkJP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAAFAAUAAAUTYCAYQUBAU1lI0TIgztE8jFImIQA7

  // Let's begin with an XML string:
  const x = '<abc><def>R0lGODlhBQAFAMQAAAAAAP////z8/PHx8evr6+jo6OHh4d7e3sPDw8LCwpqamo2NjWxsbGRkZFpaWk1NTUtLS0hISCwsLCQkJP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAAFAAUAAAUTYCAYQUBAU1lI0TIgztE8jFImIQA7</def></abc>';

  const xml = new Xml();
  xml.loadXml(x);

  // Get the base64 string:
  const gifBase64 = xml.getChildContent('def');

  console.log(gifBase64);

  // Load bd with the base64 decoded bytes.  
  bd.clear();
  bd.appendEncoded(gifBase64, 'base64');

  // Save to a GIF file.
  bd.writeFile('qa_output/xsmall.gif');
}