Generating Colorful QR Codes via Third-Party API Integration

To generate visually distinctive QR codes with custom styling, an integration with a third-party service—specifically the Cli.im (Clewm) platform—is implemented. This approach leverages their templated QR generation endpoint, which supports color schemes, background images, and logo embedding. The core request URL follows this pattern:

https://cli.im/api/qrcode/code?text={encoded_payload}&mhid={template_id}

Where: - text is the URL-encoded payload (e.g., a link or plain text string).

  • mhid refers to a preconfigured visual template ID—such as vUbEWVm7mp0hPn0nLdc—created via Cli.im’s online builder at https://mh.cli.im/.

Since the API returns HTML rather then a direct image URL, the response must be parsed to extract the embedded QR image source. A robust regex-based parser isolates <img> tag src attributes from the HTML payload. Here's a refactored C# implementation that includes caching, deterministic template selection, and safe URL handling: ``` public string FetchStylizedQRCode(string payload) { if (string.IsNullOrWhiteSpace(payload)) throw new ArgumentException("Payload cannot be null or empty.");

#if DEBUG payload = "Hello World!"; #endif

// Normalize and encode for URL safety
var sanitized = payload.Replace('+', '-');
var encoded = Uri.EscapeDataString(sanitized);
var cacheKey = ComputeMd5Hash(encoded);

// Attempt cache retrieval first
if (CacheProvider.TryGet(cacheKey, out string cachedUrl))
    return cachedUrl;

const string templateId = "vUbEWVm7mp0hPn0nLdc";
var requestUri = $"https://cli.im/api/qrcode/code?text={encoded}&mhid={templateId}";

var htmlResponse = HttpUtility.Fetch(requestUri); // Wrapper around HttpClient GET
var imageUrl = ExtractFirstImageUrl(htmlResponse);

if (!string.IsNullOrEmpty(imageUrl))
{
    // Prepend 'http:' if protocol is missing (common in relative paths)
    var absoluteUrl = imageUrl.StartsWith("//") ? "http:" + imageUrl : imageUrl;
    CacheProvider.Set(cacheKey, absoluteUrl, TimeSpan.FromHours(24));
    return absoluteUrl;
}

throw new InvalidOperationException("Failed to extract QR image URL from HTML response.");

}

private static string ComputeMd5Hash(string input) { using var hash = System.Security.Cryptography.MD5.Create(); var bytes = Encoding.UTF8.GetBytes(input); var hashBytes = hash.ComputeHash(bytes); return BitConverter.ToString(hashBytes).Replace("-", "").ToLowerInvariant(); }

private static string ExtractFirstImageUrl(string html) { const string imgPattern = @"]\bsrc\s=\s*[""']?([^""' >]+)"; var match = Regex.Match(html, imgPattern, RegexOptions.IgnoreCase | RegexOptions.Singleline); return match.Success ? match.Groups[1].Value : null; }


The resulting image URL typically resembles: ```
http://qr.api.cli.im/qr?data=F9GgzK99KhtObCUuiKsEZQ844D-LU%2F9Fy3fmjSUM%2FOBoDRBqwL4AabAW-L5f5QXMqIl3q3NhR83gINMkoexmmA%3D%3D&level=H&transparent=0&bgcolor=%23FFFFFF&forecolor=%2F%2Fstatic-develop.clewm.net%2Fcli%2Fimages%2Fbeautify%2Ftpl%2Ffg1.jpg&blockpixel=12&marginblock=2&logourl=&size=400&text=&logoshape=no&fontsize=46&fontfamily=msyh.ttf&fontcolor=%23000000&incolor=&outcolor=%23368af4&background=%2F%2Fstatic.clewm.net%2Fcli%2Fimages%2Fbeautify%2Ftpl%2Fbg1.png&qrcode_eyes=&wper=0.86&hper=0.86&lper=0.07&tper=0.07&eye_use_fore=1&qrpad=10&kid=cliim&key=ae4ec3d0e4fbcd224af775ba353bb868

This fully qualified URL resolves directly to a rendered, colorful QR code image served by Cli.im’s CDN. No client-side rendering or additional processing is required—just HTTP GET access.

Tags: qr-code cli-im regex-parsing Caching http-client

Posted on Mon, 13 Jul 2026 17:10:25 +0000 by bmw57