Marvin JS Example - Get The Image

This example demonstrates how to retrieve the molecule image from the sketcher. When you push the Export button, the current molecule is exported as a JPEG image. The result is shown next to the editor.

First of all, you need a reference for the current editor. MarvinJSUtil.getEditor(String) provides a Promise object for you to get it when the editor is ready.

After the editor is loaded, run the initcontrol() function to bind action the the Export button.

When the button is clicked, the exportImage(String) function of the editor is called. It provides a Promise object to access the result of the export process. Call its then(...) function with the callback function that describes what you would like to do with the export result. In this case, the src attribute of the <img> tag is updated with the image source.

		var marvinSketcherInstance;

		$(document).ready(function handleDocumentReady (e) {
			// get the reference to the Marvin JS editor
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;
				initControl();
			},function (error) {
				alert("Cannot retrieve sketcher instance from iframe:"+error);
			});
		});

		function initControl () {

			// the export button
			$("#btn-export").on("click", function (e) {
				var settings = marvinSketcherInstance.getDisplaySettings();
				settings.width = 420;
				settings.height = 420;
				var bg = $('#txt-background').val();
				if(bg != null && bg.trim() != '') {
					settings.backgroundColor = bg;
				}
				marvinSketcherInstance.exportStructure("jpeg", settings).then(function(source) {
					exportImage(source);
				}, function(error) {
					alert("Image export failed:"+error);
				});
			});
		}

		function exportImage(dataUrl) {
			// set image source for the existing hidden image tag and display it.
			$("#image").attr("src", dataUrl);
			$("#imageContainer").css("display", "inline-block");
		}