Displaying .cr2 Files in an Image Tag in SPFx webpart

Background

Canon RAW Image files (.cr2) contain high-quality uncompressed image data used by Canon digital cameras. Unlike standard formats such as JPEG or PNG, .cr2 files are not directly supported by HTML <img> tags, which require web-friendly formats. This presents a challenge when attempting to display .cr2 images in web applications.

The Problem

Web browsers do not natively support .cr2 files for direct rendering in <img> tags. Attempting to set the src attribute of an <img> tag to a .cr2 file will result in an unsupported file error or display nothing. This limitation makes it difficult for photographers, developers, and web applications that deal with RAW image previews.

Key Challenges

1. File Compatibility – .cr2 files need to be converted to a format that browsers can display, such as JPEG or PNG.

2. Performance – Conversion should be efficient to prevent lag, especially for large RAW files.

3. Client-side vs. Server-side Processing – Determining whether conversion should happen on the client (e.g., using JavaScript libraries like raw.js) or on the server.

4. User Experience – Ensuring a seamless experience with minimal load time and preserving image quality.

Objective

To develop a solution that enables the display of .cr2 images in web applications, either through on-the-fly conversion or alternative approaches, ensuring compatibility with HTML <img> tags while maintaining efficiency and quality.

Solution: Using dcraw for On-the-Fly Conversion

One effective approach is to use dcraw to convert .cr2 files on the fly and display them as JPEG images in <img> tags. Below is a step-by-step implementation guide:

Step 1: Add dcraw as an External Source in config.json

To use dcraw in your SharePoint Framework (SPFx) web part, add it as an external dependency in your config.json file:

"externals": {
  "dcraw": {
    "path": "https://cdn.jsdelivr.net/npm/dcraw@1.0.3/dist/dcraw.min.js",
    "globalName": "dcraw"
  }
}

Step 2: Import dcraw in Your .tsx File

Next, import dcraw in your TypeScript file:

require('dcraw');

Step 3: Implement the Conversion Process

Use the following code snippet to fetch the .cr2 file, process it using dcraw, and extract a JPEG thumbnail:

const dcraw = require('dcraw');
const response = await fetch(file.url);
const blobFile = await response.blob();
const buf = await blobFile.arrayBuffer();
const uint = new Uint8Array(buf);
const thumbnail = dcraw(uint, { extractThumbnail: true });
const blobImage = new Blob([thumbnail], { type: "image/jpeg" });

Step 4: Generate a URL for the Converted Image

Once the image is converted, create a URL that can be used as the src for the <img> tag:

const urlCreator = window.URL || window.webkitURL;
const imageUrl = urlCreator.createObjectURL(blobImage);

Step 5: Bind the Image URL to the <img> Tag

Now, use the generated imageUrl in your JSX to display the image:

<img src={imageUrl} alt="CR2 Thumbnail" />

Conclusion

By leveraging dcraw, we can efficiently convert .cr2 images on the fly and display them in an <img> tag within an SPFx web part. This approach ensures compatibility with modern web applications while maintaining performance and image quality.

This solution can be further optimized by handling large .cr2 files asynchronously, caching processed images, or implementing a hybrid client-server approach for improved efficiency. Happy coding!