EnableRequestAnimationFrame Property

Gets or sets a value that indicates whether the ImageViewer should use HTML 5 requestAnimationFrame when rendering the image.

Syntax

JavaScript
WinRT JavaScript

  get_enableRequestAnimationFrame();
 set_enableRequestAnimationFrame(value);

!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!

Property Value

Type	Description
boolean	true if the ImageViewer should use HTML 5 `requestAnimationFrame` when rendering the image, otherwise; false. Default value is false on all devices except Android, where the default is true.

Remarks

This value controls what happens when the viewer renders an image. Typically, to perform a render, you call Invalidate which draws the content of the background (BackCanvas) to the foreground canvas (CanvasId. For more information, refer to the Rendering section in ImageViewer.

If the browser supports HTML 5 requestAnimationFrame, then you schedule the drawing operation only when the system is ready. To use requestAnimationFrame, set EnableRequestAnimationFrame to true. If your browser does not support requestAnimationFrame then setting EnableRequestAnimationFrame to true will have no affect and rendering will be performed instantly.

When using EnableRequestAnimationFrame, you should not assume that the foreground canvas is updated immediately after Invalidate is called. For example, this snippet of code:

            // Assume viewer.set_enableRequestAnimationFrame(true) has been called
            // Draw the background canvas to the foreground canvas
            viewer.invalidate();
            // Get the image data of the foreground canvas
            var foreCanvas = document.getElementById(this._viewer.get_canvasId());
            var context = foreCanvas.getContext('2d');
            // If the image is hosted on a different domain than the script, you can't access image data without causing a security exception.
            var imgData = context.getImageData(0, 0, foreCanvas.width, foreCanvas.height);

This code might not work as expected since Invalidate might not have updated the foreground canvas at this point and only scheduled the draw operations. You can update the code as below to make sure you have the data in the foreground canvas:

            // Assume viewer.set_enableRequestAnimationFrame(true) has been called
            // Draw the background canvas to the foreground canvas
            // Temporarily disable animation request, the viewer will update the foreground canvas immediately
            // Save the old value, set it to false, render and set the value back to the saved value
            var enableAnimationRequest = viewer.get_enableRequestAnimationFrame();
            viewer.set_enableRequestAnimationFrame(false);
            viewer.invalidate();
            viewer.set_enableRequestAnimationFrame(enableAnimationRequest);
            // Get the image data of the foreground canvas
            var foreCanvas = document.getElementById(this._viewer.get_canvasId());
            var context = foreCanvas.getContext('2d');
            // If the image is hosted on a different domain than the script, you can't access image data without causing a security exception.
            var imgData = context.getImageData(0, 0, foreCanvas.width, foreCanvas.height);

Reference

ImageViewer Object
ImageViewer Members