indigo.generateImageAsBase64() - Generate Image as Base64

Q

How to generate images of a given structure as a Base64 encoded string with the indigo.generateImageAsBase64() method?

✍: FYIcenter.com

A

If you want to generate an image of a given structure in PNG, JPEG, or SVG format and Base64 encoded, you can use the indigo.generateImageAsBase64() method on the Ketcher Indigo interface.

Here is an HTML document that shows you how to export the chemical structure from the Ketcher editor and generate an image.

<html>
<!-- indigo-generate-image-as-base64.html Copyright (c) FYIcenter.com. -->
<head>
<title>Generate Image as Base64 Encoded String</title>
</head>
<body>
<p>Create a chemical structure, then click generate button below the editor:</p>
<iframe id=frmKetcher src="/ketcher/index.html"
  style="width: 680px; height: 400px;"></iframe>

<p><button onclick="generate();">Generate Image</button></p>
<p>SMILES:</p>
<pre id=smiles style="background-color: #ddd;"></pre>
<p>Output:</p>
<img id=output />
<script>
  var ketcher = null;

function generate() {
  frm = document.getElementById("frmKetcher");
  ketcher = frm.contentWindow.ketcher;
  indigo = ketcher.indigo;

  promiseSmiles = ketcher.getSmiles();
  promiseOutput = promiseSmiles.then(consumeSmiles, consumeSmiles);
  promiseOutput.then(consumeOutput, consumeOutput);
}

function consumeSmiles(result) {
  document.getElementById("smiles").innerHTML = result;
  opts = {outputFormat: "png", backgroundColor: "255, 255, 255"};
  return indigo.generateImageAsBase64(result, opts); 
}

function consumeOutput(result) {
  src = "data:image/png;base64,"+result;
  document.getElementById("output").src = src;
}
</script>
</body>
</html>

Open the above HTML document on your local Web server. Draw a molecule in the editor.

Click "Generate Image" button, you will see that the SMILES representation of the molecule and its image are displayed:

⇒ indigo.convert() - Convert Structure Formats

⇐ indigo.calculate() - Calculates Chemical Properties

⇑ Ketcher Indigo Interface

⇑⇑ Ketcher - Chemical Structure Editor

2023-11-09, 733🔥, 0💬

editor.setOptions() - Set Editor Options
How to get a list of options used by the Ketcher editor with the editor.setOptions() method? If you want to update one or more options used by the Ketcher editor, you can use the editor.setOptions() method on the Ketcher Editor interface. Here is an HTML document that shows you how to update some op... 2023-11-18, 944🔥, 0💬

Ketcher User Interface Menu Icons
What are Ketcher user interface menu icons? Ketcher user interface menu icons are organized into 4 toolbars: 1. Action toolbar - Displayed horizontally at the top of the window, the main toolbar contains the following buttons to perform different actions: Clear canvas - Removes everything in the edi... 2023-11-06, 916🔥, 0💬

Use Ketcher as JS Library Without UI
How to Ketcher as a JavaScript library without the editor UI? Since Ketcher offers so many API functions, we can just use it as a JavaScript library without its editor UI. Here is an HTML document that shows you how to hide the Ketcher editor UI and use it as JavaScript library: <html>... 2023-10-27, 833🔥, 0💬

What Is Ketcher Indigo Interface
What is Ketcher Indigo interface? Ketcher Indigo interface is part of the Ketcher JavaScript API that allows you to use some Indigo Toolkit functionalities. To access Ketcher Indigo interface, you need to access the "ketcher" object as a property of the content "window" object of the "iframe" where ... 2023-11-13, 822🔥, 0💬

Ketcher Editor User Interface
Where to find FAQ (Frequently Asked Questions) on Ketcher Chemical Structure Editor User Interface? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team on Ketcher Chemical Structure Editor User Interface. Ketcher User Interface Menu Icons Show InChI S... 2023-11-06, 822🔥, 0💬

Ketcher Indigo Interface
Where to find FAQ (Frequently Asked Questions) on Ketcher Indigo Interface? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team on Ketcher Indigo Interface. What Is Ketcher Indigo Interface indigo.calculate() - Calculates Chemical Properties indigo.ge... 2023-11-13, 807🔥, 0💬

indigo.generateImageAsBase64() - Generate Image as Base64
How to generate images of a given structure as a Base64 encoded string with the indigo.generateImageAsBase64() method? If you want to generate an image of a given structure in PNG, JPEG, or SVG format and Base64 encoded, you can use the indigo.generateImageAsBase64() method on the Ketcher Indigo int... 2023-11-09, 734🔥, 0💬

indigo.calculate() - Calculates Chemical Properties
How to calculate chemical properties of a given structure with the indigo.calculate() method? If you want to calculate chemical properties like mass and weight of a given chemical structure you can use the indigo.calculate() method on the Ketcher Indigo interface. Here is an HTML document that shows... 2023-11-09, 654🔥, 0💬

editor.options() - Get Editor Options
How to get a list of options used by the Ketcher editor with the editor.options() method? If you want to get a list of options used by the Ketcher editor, you can use the editor.options() method on the Ketcher Editor interface. Here is an HTML document that shows you how to get a list of options cur... 2023-11-18, 607🔥, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.