[Feature]: Add QR code download button and sharing options to the QR code generator

[prince-pokharna]

Summary

KrishiSetu has a QR code generator (QRCodeGenerator.tsx) for product verification — a core feature of the platform. However, there is currently no way for farmers to download the generated QR code as an image file or share it directly. This means farmers must take a screenshot to use the QR code on physical labels, packaging, or printed materials, which produces low-quality output.

Problem

• The QR code is rendered on-screen but has no export or download functionality
• Farmers need to attach QR codes to physical packaging, but screenshots yield blurry images at print size
• There is no sharing option to send the QR code via WhatsApp, email, or a direct link — the most common communication channels for small farmers in India

Proposed Solution

Add download and share buttons directly below the QR code component:

// client/src/components/QRCodeGenerator.tsx

const handleDownload = () => {
  const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;
  const url = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.href = url;
  link.download = `krishisetu-qr-${productId}.png`;
  link.click();
};

const handleShare = async () => {
  const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;
  canvas.toBlob(async (blob) => {
    if (navigator.share && blob) {
      await navigator.share({
        title: 'KrishiSetu Product QR Code',
        text: 'Scan to verify this product on KrishiSetu',
        files: [new File([blob], 'qr-code.png', { type: 'image/png' })],
      });
    }
  });
};

UI additions:

• A "Download PNG" button beneath the QR code
• A "Share" button that triggers the native Web Share API (falls back to copying the product verification URL on unsupported browsers)
• A "Copy Link" button that copies the direct product URL to clipboard

Scope of Work

• Add handleDownload and handleShare handlers to QRCodeGenerator.tsx
• Add fallback copy-to-clipboard for browsers without Web Share API
• Style the new buttons to match the existing Tailwind + shadcn/ui design system
• Test on mobile (primary use case)

Would you be happy to assign this? Contributing as part of GSSoC 2026.

Labels: enhancement, feature request, ui-ux, help wanted, GSSoC 2026

[prince-pokharna]

Hey @aditiraj2006 ,
Please assign it to me under GSSoC 2026.
/assign /claim /claim-assignment

[mayannkkk19]

/claim