HTML2Canvas изображение, вставленное либо размытым, либо очень большим ⇐ Html

[Anonymous]

Я работаю над веб -сайтом создания подписи электронной подписи для моей компании. У меня есть фоновое изображение подписи электронной почты на веб -сайте, и я использую холст, чтобы написать текст через изображение. Изображение, которое я использую, в 3 раза больше, чем то, что отображается на веб -сайте. Это так, когда я уменьшаю его до правильного размера, он все еще высокого качества на веб -странице. В 3 раза больше при вставке моего почтового клиента. Я также пытался отобрать холст в 2 раза или 3 раза, а затем увеличил его до 1x при его копировании, но он становится пиксельным беспорядком, когда я это делаю. Я новичок в этом, поэтому я использовал много внешнего ресурса, потому что я еще не все это понимаю.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 - что я использую для изображения 3: < /p>
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);
});
});
});
}
< /code>
Изображение 1 - Canvas на веб -сайте:
Введите описание изображения здесь < /p>
Изображение 2 - Все шкалы в почтовом клиенте:
Введите описание изображения здесь < /p>
Изображение 3 - рендерин>

Подробнее здесь: https://stackoverflow.com/questions/796 ... xtra-large