AI Builder Image Rotation Issue: Fix for Scanned Images in Power Apps

Table of Contents

This article addresses a specific issue encountered when utilizing AI Builder components within Microsoft Power Apps environments. Users might observe that images captured or processed, particularly those originating from scanning operations, appear with an incorrect orientation in the application interface. This discrepancy can lead to significant usability problems and potentially impact the accuracy of AI models relying on correctly oriented input. The focus here is on understanding the underlying cause and implementing a practical workaround to resolve this frustrating behavior.

The scope of this issue is primarily within Microsoft Power Apps applications. Developers and end-users interacting with canvas or model-driven apps that incorporate AI Builder functionalities for image processing, such as form processing, object detection, or text recognition from scanned documents or photos, might experience this problem. Ensuring images are presented correctly is crucial for user interpretation and the subsequent processing steps performed by the AI models. An incorrectly oriented image can render the AI model’s output useless or significantly degrade its performance, leading to data entry errors or failed automation processes.

Symptoms: Incorrect Image Rotation in Power Apps¶

Users encountering this issue typically see images displayed rotated from their expected orientation. For example, a document scanned in portrait mode might appear in landscape mode within the Power Apps form or gallery. This is not merely a display anomaly; the underlying image data as perceived by the browser is being rendered with the incorrect orientation. This can manifest in various ways depending on the Power App’s design and the specific AI Builder component being used.

Consider a Power App designed for processing expense receipts using AI Builder’s form processing model. A user scans a receipt using a mobile device or uploads an image file. The receipt is clearly in portrait orientation. However, when this image is displayed in an Image control within the Power App, or when it is passed to the AI Builder component for analysis, it appears rotated 90 or 180 degrees. This incorrect display makes it difficult for the user to verify the scan and can cause the AI model to fail in extracting data accurately, as the layout it expects (based on training data) is no longer present. Similarly, in applications involving object detection, a correctly captured image might show objects at skewed angles, confusing both the user and the model.

The disorientation is often inconsistent across different devices or browser sessions, adding to the complexity of diagnosing the problem. While the source image file itself might contain metadata specifying the correct orientation, the browser’s interpretation and rendering of this metadata can vary. This inconsistency is a key characteristic of the problem described. Users might spend time manually rotating images before uploading, or worse, might not notice the issue, leading to downstream data quality problems. The symptom is specifically tied to how the image is rendered or processed within the Power Apps environment, influenced by the client browser.

Cause: Browser Handling of Image Orientation¶

The root cause of this image rotation issue in Power Apps, particularly when observed in the Google Chrome browser, lies in how web browsers interpret and apply orientation metadata embedded within image files. Many digital images, especially those captured by cameras or scanners, include Exchangeable image file format (EXIF) data. This metadata contains various pieces of information about the image, including details about the capture device, date, time, and importantly, the orientation of the camera or scanner at the time of capture. The EXIF orientation tag specifies how the image data should be displayed to appear upright.

There are eight possible values for the EXIF orientation tag, representing different rotations and flips relative to the raw image data. Ideally, a web browser rendering an image with EXIF data should read this tag and apply the specified transformation (rotation, flipping) before displaying the image. This ensures the image is shown to the user exactly as it was intended to be viewed, regardless of how the raw pixel data is stored in the file. However, different browsers and even different versions of the same browser may implement the handling of EXIF orientation tags with varying degrees of adherence or with slight differences in interpretation.

Google Chrome, specifically, has been identified as having occasional issues with consistently and correctly applying EXIF orientation data in certain contexts or under particular conditions. This can lead to images being displayed based solely on the raw pixel data, ignoring the orientation tag. Consequently, an image that was captured in portrait mode but stored with its raw pixels in a landscape layout (with an EXIF tag indicating it should be rotated 90 degrees clockwise for display) might be shown in landscape orientation by Chrome because it failed to process the rotation instruction from the EXIF data. This behavior is not unique to Power Apps but can affect any web application that relies on the browser to correctly render images with EXIF orientation.

The interaction between Power Apps’ rendering engine, the AI Builder component’s image handling, and the specific browser’s image decoding and rendering pipeline creates the scenario where this discrepancy becomes apparent. When Power Apps fetches an image and the browser (like Chrome in this instance) is responsible for rendering it or providing it to a client-side component, an incorrect interpretation of the EXIF data by the browser leads to the visual rotation error. This issue is particularly noticeable with scanned documents or photos taken with mobile devices, as these often heavily rely on EXIF data to indicate the intended viewing orientation.

Resolution: Utilizing an Alternative Browser¶

The most direct and effective workaround identified for this specific image rotation issue in Power Apps when using Google Chrome is to simply switch to a different web browser. Browsers like Microsoft Edge are known to handle EXIF orientation data more consistently and reliably in the context where Chrome exhibits this problem. By accessing the Power App using Microsoft Edge, the images should be rendered with the correct orientation, respecting the embedded EXIF data as intended.

This resolution is based on the understanding that the issue stems from the browser’s rendering engine and its interaction with image metadata. Different browsers utilize different rendering engines (e.g., Chromium, EdgeHTML/Blink, Gecko, WebKit), each with its own implementation details regarding image decoding, processing, and rendering. Microsoft Edge, especially its newer versions based on the Chromium engine, often demonstrates robust handling of web standards and image metadata. By switching to Edge, you are essentially using a different rendering pipeline that correctly interprets the EXIF orientation tag, resulting in the image being displayed with the intended upright orientation.

Implementing this resolution is straightforward for the end-user. Instead of opening the Power App link in Google Chrome, they should copy the URL and paste it into the address bar of Microsoft Edge (or another compatible browser like Firefox, although Edge is specifically mentioned as a successful workaround). No changes are required within the Power Apps application itself, the AI Builder configuration, or the image files. The fix is entirely on the client-side, by changing the execution environment of the web application.

While this provides an immediate solution for users facing the problem, it’s important to consider this as a workaround rather than a permanent fix from the perspective of application development. Ideally, web applications should function consistently across all major browsers. However, given the nature of browser compatibility issues, recommending a different browser is often the quickest way to mitigate problems caused by browser-specific rendering quirks. Developers should be aware of this potential issue and inform their users if they anticipate it might occur based on the browsers commonly used within their organization. Providing clear instructions on which browser to use can significantly improve the user experience and ensure the reliability of applications relying on correctly oriented images for AI processing.

Further Considerations and Potential Workarounds¶

While switching browsers is the primary recommended solution, it’s worth exploring further considerations and potential alternative approaches, especially if using Microsoft Edge is not a feasible long-term option for all users. Understanding the underlying mechanisms also helps in diagnosing similar issues that might arise in the future.

One potential avenue involves pre-processing images before they are used in Power Apps or fed into the AI Builder model. This could involve:

1. Server-Side Processing: If images are uploaded to a storage location (like SharePoint, OneDrive, or Azure Blob Storage) before being accessed by Power Apps, a server-side process (e.g., an Azure Function, Power Automate flow) could read the EXIF orientation data and permanently rotate the image file itself. This ensures the image file is stored in its intended orientation, regardless of how a browser might interpret its metadata. This approach requires additional development effort and infrastructure but provides a robust solution independent of the client browser.
2. Client-Side Scripting (Advanced): While Power Apps canvas apps have limitations on custom JavaScript code execution, advanced developers might explore embedding custom components or using techniques that allow for more control over image rendering. This is complex and typically not recommended for standard Power Apps development unless absolutely necessary, as it can impact supportability and future updates. A custom component could potentially use JavaScript libraries to read EXIF data and rotate a canvas element displaying the image.
3. Using Power Automate for Rotation: A Power Automate flow triggered when an image is uploaded could potentially use connectors or custom actions that perform image manipulation, including rotation based on metadata or even fixed rotation if the source (like a specific scanner) consistently produces images with a known incorrect orientation. This integrates well within the Power Platform ecosystem.

Another important aspect is staying updated. Both Power Apps and web browsers receive regular updates. It’s possible that future updates to Google Chrome might address this specific bug in handling EXIF orientation. Similarly, updates to Power Apps or the AI Builder components might include internal handling to compensate for browser inconsistencies, perhaps by processing orientation metadata before displaying the image or sending it to the AI model. Ensuring users and development environments are on the latest versions is always a good practice for resolving known issues.

Developers building Power Apps that rely heavily on image processing should also incorporate testing across different major browsers during the development phase. This helps identify browser-specific issues like this image rotation problem early on. While Power Apps aims for cross-browser compatibility, subtle differences in rendering or feature support can sometimes lead to unexpected behavior.

The impact of this issue extends beyond just visual annoyance. For applications where AI Builder models are used for tasks like optical character recognition (OCR) or layout analysis (e.g., form processing), incorrect image orientation can drastically reduce the accuracy of the AI model’s output. An OCR model trained on upright text will perform poorly on text rotated 90 degrees. Therefore, ensuring correct orientation is not just a matter of display but a fundamental requirement for the successful operation of these AI features. Communicating the browser workaround to users is crucial for maintaining data quality and application reliability.

Reporting the Issue to Microsoft¶

If you encounter this issue, especially if the recommended workaround (switching browsers) does not resolve it, or if you have additional details that could help diagnose the problem, reporting it to Microsoft is valuable. Providing feedback helps Microsoft identify and prioritize bugs for future fixes in Power Apps, AI Builder, or potentially even through collaboration with browser vendors like Google.

When reporting the issue, be as specific as possible:
* Describe the exact symptoms you are observing (e.g., image rotated 90 degrees clockwise).
* Specify the version of Power Apps you are using (if known).
* Specify the exact version of the browser (Google Chrome) where the issue occurs.
* Mention the browser(s) where the issue does not occur (e.g., Microsoft Edge).
* Describe the source of the images (e.g., scanned with a specific device, uploaded from a mobile phone, downloaded from a certain system).
* Provide steps to reproduce the issue.
* If possible, include screenshots or even a short video demonstrating the problem.

You can typically report issues through your organization’s Microsoft 365 or Dynamics 365 support channels, or through community forums where Microsoft support engineers are active. Detailed and reproducible bug reports are essential for the product teams to investigate and implement fixes in a timely manner.

This browser-specific image rendering anomaly highlights the complexities inherent in developing web applications that rely on client-side rendering and standard browser behaviors. While AI Builder provides powerful capabilities, external factors like browser compatibility can sometimes introduce unexpected challenges. Understanding these potential points of failure allows developers and users to implement effective workarounds and contribute to the ongoing improvement of the platform.

Have you experienced this specific image rotation issue in Power Apps? Did switching browsers resolve it for you? Do you know of any other workarounds that have been successful? Share your experiences and insights in the comments below!