To Capture an Image Preview

This AutoCAD JavaScript tutorial demonstrates how to implement a simple palette in AutoCAD and capture a preview image of the editor window.

In this tutorial you will,

Create an HTML file that defines the appearance of the palette and a button to execute a JavaScript function
Capture and display a preview of the drawing editor window in an IMG HTML element

Use the Acad.Application.activedocument.addPalette() function to add a palette

Type the following HTML5 and JavaScript statements in a plain text file.

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <script type="text/javascript" src="https://df-prod.autocad360.com/jsapi/v4/Autodesk.AutoCAD.js"></script>
       <title>Sample App</title>
       <script>
           function capturePreview()
           {
               Acad.Application.activedocument.capturePreview(200,200).then(success,error);
           }

           function success(encodedbmp)
           {
               var container = document.getElementById('imageContainer');
               var img = document.createElement('img');
               var src = "data:image/bmp;base64," + encodedbmp;
               img.setAttribute('src', src);
               img.setAttribute('id', 'previewImg');
               container.appendChild(img);
           }

           function error()
           {
               alert("error");
           }
       </script>
   </head>
   <body>
       <input type='button' onclick='window.location.reload()' value='Reload' style="display:inline"/>
       <h1>Sample App</h1>
       <input type='button' onclick='capturePreview()' value="capturePreview"/>
       <div id='imageContainer'></div>
       <p></p>
   </body>
</html>

Save the file as capture.html.
Type the following JavaScript statements in another plain text file.
```
// Create a palette named "Sample Palette" and load the capture.html file
Acad.Application.addPalette("Sample Palette", "c:/AutoCAD/capture.html");
```
Note: Make sure to specify the full path to the capture.html. Replace "c:/AutoCAD/" in the above JS code with the location of your capture.html file.
Save the file as capture.js.
Add the path from where you want to load the JavaScript file to the existing paths of the TRUSTEDPATHS system variable.
At the AutoCAD Command prompt, enter webload and then press enter again to use the Load option.
At the Enter javascript URL to load: prompt, enter c:/AutoCAD/capture.js.

Note: Replace "c:/AutoCAD/" with the location of your capture.js file.

The "Sample Palette" should now be displayed in AutoCAD with a preview image of the geometry in the current editor window.

To Capture an Image Preview

Was this information helpful?