EnableRequestAnimationFrame Property

get_enableRequestAnimationFrame();
set_enableRequestAnimationFrame(value);
Object.defineProperty('enableRequestAnimationFrame');

Property Value

This value controls what happens when the viewer renders its content as described in Image Viewer Rendering.

If the browser supports HTML5 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.enableRequestAnimationFrame has been set to true
            // Draw the content to the foreground canvas
            viewer.invalidate();
            // Get the image data of the foreground canvas
            var canvas = viewer.canvas;
            var context = canvas.getContext('2d');
            // If the image is hosted on a different domain than the script, you cannot access image data without causing a security exception.
            var imgData = context.getImageData(0, 0, canvas.width, canvas.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.enableRequestAnimationFrame has been set to true
            // Draw the content 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.enableRequestAnimationFrame;
            viewer.enableRequestAnimationFrame = false;
            viewer.invalidate();
            viewer.enableRequestAnimationFrame = true;
            // Get the image data of the foreground canvas
            var canvas = viewer.canvas;
            var context = canvas.getContext('2d');
            // If the image is hosted on a different domain than the script, you cannot access image data without causing a security exception.
            var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
            

Reference

ImageViewer Object
ImageViewer Members