renderRedirect Method


Render the content of the viewer to an external context.


JavaScript Syntax
ImageViewer.prototype.renderRedirect = function(context, options, clipRectangle) 
TypeScript Syntax
renderRedirect(context: CanvasRenderingContext2D, options: ImageViewerRenderRedirectOptions, clipRectangle: LeadRectD): void; 



Target HTML5 Canvas Element context to render the content of the viewer to.


Rendering options


Clipping rectangle to use.


This method can be used to render the content of the viewer to an external context. ImageViewerPanControl uses this method to show a smaller version of the viewer in a separate external control.

To take a "snapshot" of the viewer surface to perform such operations as screen capture or printing, use RenderRedirect passing it the target context (of the printer or a bitmap).

To perform live updates for operations such as pan window, subscribe to the RedirectRender event to get notified whenever the viewer content is changed. Then call RenderRedirect to render the content of the viewer into the target device.

During the render cycle, the value of IsRenderRedirected will be set to true if this particular rendering operation is targeting an external device other than the viewer itself. If you are performing custom rendering, you can check the value of this property to apply any modification needed.


This example will mirror the content of the viewer into an external canvas with live updates whenever the viewer content changes.

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

JavaScript Example
var control = document.createElement("canvas"); 
control.width = 400; 
var renderView = false; 
control.addEventListener("dblclick", function () { 
   renderView = !renderView; 
var delta = 20; 
var destRect = lt.LeadRectD.create(delta, delta, control.clientWidth - delta * 2, control.clientHeight - delta * 2); 
var clipRect = destRect; 
var options = new lt.Controls.ImageViewerRenderRedirectOptions(); 
var item = null; 
if (!renderView) 
   item = this._imageViewer.items.item(0); 
var sourceRect; 
if (item == null) 
   sourceRect = this._imageViewer.getViewBounds(true, false); 
else { 
   sourceRect = this._imageViewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, false); 
   options.renderBackgrounds = false; 
   options.renderBorders = false; 
   options.renderItemStates = false; 
   options.renderShadows = false; 
   options.renderText = false; 
options.createTransform(this._imageViewer, destRect, sourceRect, lt.Controls.ControlSizeMode.fitAlways,,; 
clipRect = options.transform.transformRect(sourceRect); 
var ctx = control.getContext("2d"); 
this._imageViewer.renderRedirect(ctx, options, clipRect); 
ctx.strokeStyle = "black"; 
ctx.strokeRect(destRect.x, destRect.y, destRect.width + 1, destRect.height + 1); 
var rect; 
if (item == null) 
   rect = this._imageViewer.getViewBounds(true, true); 
   rect = this._imageViewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, true); 
var points = [lt.LeadPointD.create(rect.left,, lt.LeadPointD.create(rect.right, rect.bottom)]; 
var xmin = points[0].x; 
var ymin = points[0].y; 
var xmax = xmin; 
var ymax = ymin; 
for (var i = 1; i < points.length; i++) { 
   if (points[i].x < xmin) xmin = points[i].x; 
   if (points[i].x > xmax) xmax = points[i].x; 
   if (points[i].y < ymin) ymin = points[i].y; 
   if (points[i].y > ymax) ymax = points[i].y; 
var bounds = lt.LeadRectD.fromLTRB(xmin, ymin, xmax, ymax); 
ctx.strokeStyle = "Yellow"; 
ctx.strokeRect(bounds.x, bounds.y, bounds.width - 1, bounds.height - 1); 


Target Platforms

Help Version 19.0.2017.10.27
Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly