如何扩展或配置AEM Adaptive Image Servlet支持自定义质量参数？

Great question! I’ve tackled a similar requirement with the Adaptive Image Servlet in AEM 6.3 before, so let me walk you through the most reliable approaches to make it accept custom quality parameters.

Option 1: Extend the Adaptive Image Servlet (Recommended) #

The default Adaptive Image Servlet only pulls quality values from component design policies, but you can easily extend it to prioritize a custom request parameter (like q) while falling back to the design policy value when the parameter isn’t present.

Step 1: Create a Custom Servlet #

Create an OSGi component that extends the default AdaptiveImageServlet and overrides the getQuality method:

import com.day.cq.dam.core.servlet.AdaptiveImageServlet;
import org.apache.sling.api.SlingHttpServletRequest;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Service;
import javax.servlet.Servlet;

@Component(
    service = Servlet.class,
    property = {
        "sling.servlet.resourceTypes=dam:Asset",
        "sling.servlet.selectors=img",
        "sling.servlet.extensions=jpeg,png,gif",
        "sling.servlet.methods=GET",
        "service.ranking=100" // Ensures this servlet takes precedence over the default one
    }
)
public class CustomQualityAdaptiveImageServlet extends AdaptiveImageServlet {

    @Override
    protected int getQuality(SlingHttpServletRequest request, com.day.cq.dam.commons.adapter.AdaptableImage adaptableImage) {
        // Check for custom quality parameter first
        String qualityParam = request.getParameter("q");
        if (qualityParam != null && qualityParam.matches("\\d+")) {
            int customQuality = Integer.parseInt(qualityParam);
            // Clamp values to valid 1-100 range to avoid errors
            return Math.max(1, Math.min(100, customQuality));
        }
        // Fall back to default design policy behavior if no custom parameter is provided
        return super.getQuality(request, adaptableImage);
    }
}

Step 2: Deploy and Test #

Once deployed, you can append ?q=25 or ?q=82 to your image URLs to get the desired quality. For example:

• Low-quality: http://localhost:4502/content/we-retail/us/en/experience/arctic-surfing-in-lofoten/_jcr_content/root/responsivegrid/content_fragment/par3/image.img.75.1024.jpeg/1579280316937/fjord-waves.jpeg?q=25
• High-quality: http://localhost:4502/content/we-retail/us/en/experience/arctic-surfing-in-lofoten/_jcr_content/root/responsivegrid/content_fragment/par3/image.img.75.1024.jpeg/1579280316937/fjord-waves.jpeg?q=82

Step 3: Frontend Implementation #

Since you’re using the out-of-the-box We.Retail components, add a small script to handle the hover swap:

<!-- Add this to your page's clientlib or component markup -->
<script>
document.querySelectorAll('.cq-image').forEach(imgContainer => {
    const img = imgContainer.querySelector('img');
    if (!img) return;

    // Store low-quality URL and set up high-quality URL
    const lowQualitySrc = img.src.replace(/q=\d+/, 'q=25') || `${img.src}?q=25`;
    const highQualitySrc = img.src.replace(/q=\d+/, 'q=82') || `${img.src}?q=82`;
    
    img.src = lowQualitySrc;
    img.dataset.highQuality = highQualitySrc;

    // Swap on hover
    img.addEventListener('mouseenter', () => {
        img.src = img.dataset.highQuality;
    });
    img.addEventListener('mouseleave', () => {
        img.src = lowQualitySrc;
    });
});
</script>

Option 2: Alternative (No Code, Limited Flexibility) #

If you want to avoid custom code, you could create multiple component design policies with different quality values (25% and 82%) and render two image elements (hidden by default, swapped via CSS/JS). However, this is less scalable than the servlet extension approach, as it requires duplicating component configurations.

Key Notes #

• Caching: The servlet automatically handles caching for different quality values, since the q parameter is part of the request URL.
• Validation: The custom servlet clamps quality values to 1-100 to prevent invalid requests that could break image processing.

内容的提问来源于stack exchange，提问作者Saravana Prakash