I am working on a email signature creation website for my company. I have the background image of the email signature on the website, and am using the canvas to write the text over the image. The image I am using is 3x the size of what is displaying on the website. This is so when I scale it down to the correct size it is still high quality on the webpage.
The issue I’m running into is when I copy the canvas using html2canvas at scale: 1 it is way lower quality than the original canvas on the webpage when pasting into the email client.
I have tried using scale: 2 or scale: 3, but that makes the email signature 2x or 3x larger when pasting into my email client. I have also tried rendering the canvas at 2x or 3x then scaling it down to 1x when copying it, but it becomes a pixelated mess when I do that. I am new to this so I have been using a lot of outside resource because I don’t fully understand it all yet.
Code 1 – What I am using for image 1:
function copySignature() {
const signatureElement = document.getElementById('signature-image-wrapper');
html2canvas(signatureElement, { scale: 1 }).then(canvas => {
canvas.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);
});
});
});
}
Code 2 – What I am using for image 3:
function copySignature() {
const signatureElement = document.getElementById('signature-image-wrapper');
html2canvas(signatureElement, { scale: 3 }).then(canvas => {
// Resize to 450px wide, keeping aspect ratio
const targetWidth = 450;
const scaleFactor = targetWidth / canvas.width;
const targetHeight = canvas.height * scaleFactor;
const resizedCanvas = document.createElement('canvas');
resizedCanvas.width = targetWidth;
resizedCanvas.height = targetHeight;
const ctx = resizedCanvas.getContext('2d');
ctx.drawImage(canvas, 0, 0, targetWidth, targetHeight);
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);
});
});
});
}
Image 1 – Canvas on the website:
enter image description here
Image 2 – All the Scales in email client:
enter image description here
Image 3 – Render the image at scale 3 but paste at smaller size:
enter image description here
