requestAnimationFrame
when rendering the image.get_enableRequestAnimationFrame();
set_enableRequestAnimationFrame(value);
!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!
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. |
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);