Tutorials > 

To Capture an Image Preview

 
 
 

The AutoCAD JavaScript tutorial demonstrates how you can implement a simple palette in AutoCAD using JavaScript and HTML5 for capturing an image preview.

  1. Use the following HTML5 and JavaScript code to create the commands (JavaScript functions) that are invoked when you click a button on the palette:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
    		<script type="text/javascript" src="http://www.autocadws.com/
    jsapi/v1/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>
  2. Save the file as capture.html.
  3. Use the Acad.Application.activedocument.addPalette() API to add the palette. The following JavaScript code demonstrates how to load the palette in AutoCAD:
    Acad.Application.activedocument.addPalette("Sample Palette","C:/capture.html");
  4. From the AutoCAD command line, enter webload to load the JavaScript file. A palette gets created inside AutoCAD.

    Capturing Image Preview using JavaScript in AutoCAD