I am making an email signature creator for my company. The site itself works, but I'm having issues withe the copying and pasting. If I use a .png it copies correctly, but the quality lowers once it's uploaded to the website for some reason. If I use a .svg, it either looks horrible, if you try scale it up, copy it, then scale the copy down. Or it looks good but it's huge if you just scale it up and copy it. The .svg also looks much better on the site itself.

Scaled up .svg (pastes huge)

  
  
  
  
  




  

    
Interapt Email Signature Creator
    
1. Enter your information below

           2. Click the "Copy Me" button 

           3. Follow steps for your operating system


      Windows  
      Mac  
      Outlook Web
    
    


    
First Name:
    
    


    
Last Name:
    
    


    
Pronouns (They/Them):
    
    


    
Job Title:
    
    


    
Interapt Email:
    
    


    
Phone Number:
    
    



    

      
      

        
John Doe
        
(They/Them)
        
Operations Engineer
        
firstname.lastname@interapt.com
        
502-123-4567
      
    


    

    

      Copy Me!
    
    

  

  

Render the .svg at a higher quality without scaling up the past (looks way worse) (just posting the copy signature function since it's the only thing changing)

        function copySignature() {
    const signatureElement = document.getElementById('signature-image-wrapper');

    const desiredWidth = signatureElement.offsetWidth;
    const desiredHeight = signatureElement.offsetHeight;

    // Use a scale of 3 or higher for better quality
    html2canvas(signatureElement, { scale: 3 }).then(canvas => {
        const resizedCanvas = document.createElement("canvas");
        resizedCanvas.width = desiredWidth;
        resizedCanvas.height = desiredHeight;

        const ctx = resizedCanvas.getContext("2d");
        ctx.drawImage(canvas, 0, 0, desiredWidth, desiredHeight);

        resizedCanvas.toBlob(blob => {
            const item = new ClipboardItem({ "image/png": blob });
            navigator.clipboard.write([item]).then(() => {
                alert("Signature image copied to clipboard!");
            }, err => {
                alert("Failed to copy image to clipboard.");
                console.error(err);
            });
        });
    });
}

Using a .png which is lower quality once uploaded to the website which translates to the copy and pasting of the image

  
  
  
  
  




  

    
Interapt Email Signature Creator
    
1. Enter your information below

           2. Click the "Copy Me" button 

           3. Follow steps for your operating system


      Windows  
      Mac  
      Outlook Web
    
    


    
First Name:
    
    


    
Last Name:
    
    


    
Pronouns (They/Them):
    
    


    
Job Title:
    
    


    
Interapt Email:
    
    


    
Phone Number:
    
    



    

      
      

        
John Doe
        
(They/Them)
        
Operations Engineer
        
firstname.lastname@interapt.com
        
502-123-4567
      
    


    

    

      Copy Me!