grabImage()

Returns a base64 string that represents the data for the specified area of an image that is in the viewer. You can use this data to apply basic transformations such as rotation and scaling to the area. Use this method to select an area that you can clip, extract, or save. This image then can be displayed in the viewer.

Sample syntax

ViewONE.grabImage(var mimeType,var mimeTypeProperties, var encoding, var clipArea, var currentState)

When the user is drawing a drag box and releases the mouse, the grabImage method is called with all of the information, including start and end coordinates. The grabImage method gathers the following information, and to obtain that information, you must enable an event handler for JavaScript event 72.

mimeType: The MIME type of the output. The supported MIME type values are image/png, image/tiff, and image/jpeg.
mimeTypeProperties: This variable is not currently used, so the value is ignored.
encoding: The encoding type to be used to represent the image data. You must set this parameter to base64.
clipArea: An instance of the JSObject class that defines the area to clip from the original image. You must include the following numeric attributes in the object: x-axis starting point, y-axis starting point, width, and height.
currentState: An instance of the JSObject class that defines the state of the area to clip. You must include the following numeric attributes in the object: scale and rotate.

Example

The following script shows how you might use the grabImage method to paste a selected area of an image outside of the viewer. This script assumes that you created a custom button that the user clicks to select the area.

<script>

// Evaluate the status of the custom button (up or down)
function ev()
{
   var status = ViewONE.isUserDragMode();
   if (status)
      return 7;
   else
      return 5;
}

// This function is fired by the custom button
function toggle()
{
   if (ViewONE.isUserDragMode())
   {
      ViewONE.endUserDragMode("user abort");
   }
   else
   {
      ViewONE.startUserDragMode("style");
   }
}

// The event handler
function func(id,text,jRect)
{
   if (id == 71)       // Drag MOUSE END
   {
      tellViewerToGrabTheImage(jRect)
   }   
   else if (id == 72)  // GRAB IMAGE SUCCESS
   {
      pasteTheImageDataOnScreen(text);
   }
   else if (id == 73)  //GRAB IMAGE FAIL   
   {
      alert("ERROR : "+ text); // The reason for the failure.
   }
}

function tellViewerToGrabTheImage(jRect)
{
   var jShape = eval('('+jRect+')');
   
   if (jShape.status != 2)
   {
      
      // Clean the values
   
      // The width or height might be negative 
      // (in case the mouse moved, for instance, from right to left)
      var realX = cleanVal(jShape.dragRectangle.x);
      var realY = cleanVal(jShape.dragRectangle.y)
      var realWidth = cleanVal(jShape.dragRectangle.width);
      var realHeight = cleanVal(jShape.dragRectangle.height);
      
      if (realWidth < 0)
      {
         realWidth = Math.abs(realWidth);
         realX = realX - realWidth;
      }
      if (realHeight < 0)
      {
         realHeight = Math.abs(realHeight);
         realY = realY - realHeight;
      }
      // Build a shape with the selected area of the screen
      var shape = 
      {
         x : realX,
         y : realY,
         width : realWidth,
         height : realHeight
      };
      
      // Build a mimeTypeProperty object
      var mimeTypeProp = 
      {
      
      }
      // Specify any transformation to be applied to the output image
      var stateObj = 
      {
         rotate : "0deg", // no rotation applied
         scale : "1"       // no zoom applied
      }
      
      // call grabImage to generate a string representing the selected area
      try
      {
         ViewONE.grabImage("image/png",mimeTypeProp,"base64",shape, stateObj);
         // when the viewer finishes processing this function, event 72 gets
         // called (or 73 in case of failure)
      }   
      catch(e)
      {
         alert("Javascript Exception caught when calling ViewONE.grabImage(..); 
              The reason is: "+e.message);
      }
   }
}

function pasteTheImageDataOnScreen(text)
{
   var image = text; 
      // the text coming from the event handler contains the image data
      
   var img = document.createElement('img');
   img.src = 'data:image/png;base64,'+image;
   document.getElementById("gotImage").appendChild(img);
}

function cleanVal(string)
{
   var value;
   if (string.indexOf(".") > 1)
   {
      var elements = string.split(".");
      value = parseInt(elements[0]);
   }
   else if (string.indexOf("px") > -1)
   {
      var elements = string.split("p");
      value = parseInt(elements[0]);
   }      
   return value;
}

function cleanDiv()
{
   document.getElementById("gotImage").innerHTML = "";
}

</script>