Tutorial > Image Export
While the ChemDoodle Web Components are themselves a type of image for websites, you can export images using the API for storage or other media.
Image Types
The ChemDoodle Web Components image packages are contained in the ChemDoodle.io package. The following image types are supported:
- Portable Network Graphics (.png): Common bitmap graphics format allowing transparency.
- Web Scalable Vector Graphics (.svg): Web standard scalable vector graphic format.
Using the Image Packages
The image packages in the ChemDoodle Web Components implement 3 functions:
- string(): Generates a JavaScript string defining the contents of the image as a text object.
- open(): Opens a new web page and includes the image in the DOM of this page.
- download(): Downloads the image as a file through the browser.
Using the ChemDoodle.io.PNG package, you can export PNG images from ChemDoodle Web Components. The following examples show how this is done.
If you click on the Open Image in New Page button, you will see a PNG image (not a ChemDoodle Web Component). This is done by calling the ChemDoodle.io.png.open() function on the Canvas.
// create the canvas
let myCanvas = new ChemDoodle.ViewerCanvas('myCanvas', 100, 100);
// ... customize your canvas
// load a molecule or figure
myCanvas.loadMolecule(myMolecule);
// open the image in a new window
ChemDoodle.io.png.open(myCanvas);You may also allow the user to download the image directly. Here a link calls the ChemDoodle.io.png.download() function: Download the Image
<a href="javascript:void(0)" onclick="ChemDoodle.io.png.download(myCanvas);">Download the Image</a>As a programmer, you may want to manually interact with the image data and you may generate a string of the PNG by calling the ChemDoodle.io.png.string() function. Keep in mind that PNG is a bitmap format, so the string will be represented as Base64 text so you can use it in web pages, which will be text based.
ChemDoodle.io.png.string(myCanvas);The string is output as the following:
data:image/png;base64,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 ChemDoodle Web Component Canvases may also be output to PNG, however, not by default. First you must set the static ChemDoodle._Canvas3D.PRESERVE_DRAWING_BUFFER boolean to true before initializing any 3D component you wish to derive an image from. Afterwards, you may use the png package on the 3D component just like you would on the 2D component. Keep in mind, enabling this functionality requires the browser to store another buffer of the image data and therefore may lead to performance issues.
Feel free to spin this molecule around then press the Open 3D Image in New Page button.
// enable the WebGL image caching
ChemDoodle._Canvas3D.PRESERVE_DRAWING_BUFFER = true;
// create the canvas
let my3DCanvas = new ChemDoodle.TransformCanvas3D('my3DCanvas', 250, 250);
// ... customize your canvas
// load a molecule
my3DCanvas.loadMolecule(my3DMolecule);
// open the image in a new window
ChemDoodle.io.png.open(my3DCanvas);SVG export works in the exact same way as exporting PNG images, except that you use the ChemDoodle.io.svg package instead. SVG is a scalable vector graphic, and can be increased in scale without loss of resolution, as the next comparison shows. You can zoom in on these images as compare the quality, the left image is the PNG and the right image is the SVG. SVG export can only be performed on 2D Canvases. Note that the ChemDoodle.io.svg package is included in proprietary builds only.
PNG
| SVG |
The string of the SVG looks like the following:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100"><defs/><g><rect fill="#FFFFFF" stroke="none" x="0" y="0" width="100" height="100"/><g transform="translate(50,50) rotate(0,0,0) scale(1,1) translate(-50,-50)"><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="45.22208" y="21.200000000000006" text-anchor="middle" dominant-baseline="central">O</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="32.7488" y="42.800000000000004" text-anchor="middle" dominant-baseline="central">N</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="20.278399999999998" y="35.60000000000001" text-anchor="middle" dominant-baseline="central">C</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="8.607501562499998" y="35.60000000000001" text-anchor="middle" dominant-baseline="central">H</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="8px" font-style="normal" font-weight="normal" text-decoration="normal" x="14.442950781249998" y="38.60000000000001" text-anchor="middle" dominant-baseline="central">3</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="71.31775999999999" y="38.41232000000001" text-anchor="middle" dominant-baseline="central">N</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="20.278399999999998" y="64.4" text-anchor="middle" dominant-baseline="central">O</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="45.22208" y="64.4" text-anchor="middle" dominant-baseline="central">N</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="75.7904" y="24.723680000000005" text-anchor="middle" dominant-baseline="central">C</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="83.0120796875" y="24.723680000000005" text-anchor="middle" dominant-baseline="central">H</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="8px" font-style="normal" font-weight="normal" text-decoration="normal" x="88.84752890625" y="27.723680000000005" text-anchor="middle" dominant-baseline="central">3</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="71.31775999999999" y="61.587680000000006" text-anchor="middle" dominant-baseline="central">N</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="45.22208" y="78.80000000000001" text-anchor="middle" dominant-baseline="central">C</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="10px" font-style="normal" font-weight="normal" text-decoration="normal" x="52.4437596875" y="78.80000000000001" text-anchor="middle" dominant-baseline="central">H</text><text fill="#000000" stroke="none" font-family="Helvetica,Arial,Dialog" font-size="8px" font-style="normal" font-weight="normal" text-decoration="normal" x="58.27920890625" y="81.80000000000001" text-anchor="middle" dominant-baseline="central">3</text><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 43.92208 26.200000000000006 L 43.92208 35.60000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6" stroke-dasharray=""/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 46.522079999999995 26.200000000000006 L 46.522079999999995 35.60000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6" stroke-dasharray=""/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 37.22570888669024 40.21577644499525 L 45.22208 35.60000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 57.69248 42.800000000000004 L 45.22208 35.60000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 32.7488 47.800000000000004 L 32.7488 57.20000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 28.271941103621266 40.21520848938873 L 24.755258896378734 38.184791510611284" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 66.75505711095508 39.881624132627344 L 57.69248 42.800000000000004" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 57.69248 42.800000000000004 L 57.69248 57.20000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 55.09248 44.30111069989303 L 55.09248 55.698889300106984" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 25.68359350935065 62.78034023673219 L 33.39881430047192 58.32582476841737" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 24.383564908406818 60.52869069989747 L 32.09878569952809 56.07417523158265" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 40.74517111330976 61.81577644499525 L 32.7488 57.20000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 49.698938896378735 61.81520848938873 L 57.69248 57.20000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 74.80581137591373 43.221838406781686 L 79.7216 50.00000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 72.93530651878626 33.46177357128713 L 74.17285348121374 29.67422642871288" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 66.75505711095508 60.11837586737267 L 57.69248 57.20000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 74.80581137591373 56.77816159321833 L 79.7216 50.00000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 73.582357350438 54.03653915734563 L 76.735558310211 49.68873104848797" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/><path fill="none" stroke="#000000" paint-order="fill stroke markers" d=" M 45.22208 69.4 L 45.22208 73.80000000000001" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.6"/></g></g></svg>
