Creating an Image Label from Buffer

This example demonstrates how to create an image label from a memory buffer. This example uses the ICreator80 (CreatePosition, CreateImageLabelFromBuffer, CreateLabelStyle) methods.

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<body id="Body" >

   

    <img id="sampleImage" src="sample.png" width="300" height="150" onclick="addImageToTerraExplorer()" style="cursor:pointer"/><br />

    <span>Click the image above to add it to TerraExplorer as memory buffer</span>

    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000; visibility:hidden;"></canvas>

    <object id="SGWorld" classid="CLSID:3a4f91a0-65a8-11d5-85c1-0001023952c1">

    </object>

 

    <script language="javascript">

      

        function addImageToTerraExplorer() {

 

          // get the image into the canvas

            var c = document.getElementById("myCanvas");

            var ctx = c.getContext("2d");

            var img = document.getElementById("sampleImage");

            ctx.drawImage(img, 0, 0, 1350, 650, 0, 0, c.width, c.height);

 

            // get image memory

            var imageData = ctx.getImageData(0, 0, c.width, c.height);

            var buffer = imageData.data;

 

            // create an array of DWORD representing the image          

            var arr = newArray();

            for (var i = 0; i < buffer.length; i += 4)

                arr.push(buffer[i] << 0 | buffer[i + 1] << 8 | buffer[i + 2] << 16 | buffer[i + 3] << 24);

 

            // Add the image to TerraExplorer

            var pointInfo = SGWorld.Window.CenterPixelToWorld();

            SGWorld.Creator.CreateImageLabelFromBuffer(SGWorld.Creator.CreatePosition(pointInfo.Position.X, pointInfo.Position.Y, 100),

                arr, c.width, c.height, // buffer (DWORD) ,width,height

                SGWorld.Creator.CreateLabelStyle());      

 

        }

 

</script>

</body>

</html>