Изображение либо выглядит хуже, либо слишком велико после копирования с моего веб-сайта и вставки в другое место.

Изображение либо выглядит хуже, либо слишком велико после копирования с моего веб-сайта и вставки в другое место. ⇐ Html

1 сообщение • Страница 1 из 1

Anonymous

Изображение либо выглядит хуже, либо слишком велико после копирования с моего веб-сайта и вставки в другое место.

Цитата

Сообщение Anonymous » 03 янв 2026, 16:53

Я создаю создатель подписи электронной почты для своей компании. Сам сайт работает, но у меня проблемы с копированием и вставкой. Если я использую .png, он копируется правильно, но качество по какой-то причине снижается после загрузки на веб-сайт. Если я использую .svg, он либо выглядит ужасно, если вы попытаетесь увеличить его, скопировать, а затем уменьшить копию. Или это выглядит хорошо, но огромно, если вы просто увеличите его и скопируете. .svg также выглядит намного лучше на самом сайте.
Увеличенный .svg (вставляется огромным)

Код: Выделить всё





Email Signature Site


body {
background-color: #333333;
color: white;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.content-box {
background-color: #4d4d4d;
padding: 20px;
margin: 40px auto;
width: 90%;
max-width: 800px;
border-radius: 10px;
}

h1 {
text-align: left;
margin-top: 30px;
}

p {
text-align: left;
margin: 0px;
font-size: 16px;
line-height: 1.5;
}

input[type="text"] {
width: 100%;
max-width: 100%;
padding: 7px;
font-size: 16px;
border-radius: 5px;
background-color: #333333;
color: white;
}

button {
background-color: #C12142;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

a {
text-decoration: none;
border: none;
outline: none;
}

.email-signature {
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
padding: 10px;
border-radius: 5px;
width: fit-content;
margin: 0 auto;
}

.signature-image-wrapper {
position: relative;
display: inline-block;
text-align: left;
}

.signature-image-wrapper img {
display: block;
height: auto;
max-width: 100%;
}

.signature-text {
position: absolute;
top: 20px;
/* Adjust this to position text vertically */
left: 20px;
/* Adjust this to position text horizontally */
color: white;
font-family: Arial, sans-serif;
}

.signature-text p {
margin: 0;
line-height: 1.3;
}






Interapt Email Signature Creator
1. Enter your information below

2. Click the "Copy Me" button

3.  Follow steps for your operating system

[url=Windows Instructions.html]Windows[/url]  
[url=Mac Instructions.html]Mac[/url]  
[url=Web Instructions.html]Outlook Web[/url]

First Name:


Last Name:


Pronouns (They/Them):


Job Title:


Interapt Email:


Phone Number:



[img]450 Signature.svg[/img]

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



Copy Me!




function formatPhoneNumber() {
const phoneInput = document.getElementById('phoneNumber');
let phoneNumber = phoneInput.value.replace(/\D/g, '');

if (phoneNumber.length > 3 && phoneNumber.length  6) {
phoneNumber = phoneNumber.slice(0, 3) + '-' + phoneNumber.slice(3, 6) + '-' + phoneNumber.slice(6, 10);
}

phoneInput.value = phoneNumber;
updateSignature();
return phoneNumber;
}

function updateSignature() {
const firstName = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;
const proNouns = document.getElementById('proNouns').value;
const jobTitle = document.getElementById('jobTitle').value;
const email = document.getElementById('email').value;
const phoneNumber = document.getElementById('phoneNumber').value;

const fullNameEl = document.getElementById('fullName');
const pronounsEl = document.getElementById('pronouns');
const jobTitleEl = document.getElementById('jobTitleText');
const emailEl = document.getElementById('emailText');
const phoneEl = document.getElementById('phoneText');

fullNameEl.textContent = `${firstName} ${lastName}`;
pronounsEl.textContent = proNouns ? `(${proNouns})` : '';

jobTitleEl.textContent = jobTitle;
emailEl.innerHTML = `[url=mailto:${email}]${email}[/url]`;
phoneEl.textContent = phoneNumber;

requestAnimationFrame(() =>  {
const nameWidth = fullNameEl.offsetWidth;
pronounsEl.style.left = `${200 + nameWidth + 6}px`;
pronounsEl.style.top = '-12px';
});
} //  {
// Create a blob from the canvas and copy it to the clipboard
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);
});
});
});
}

Отобразите .svg в более высоком качестве, не увеличивая масштаб прошлого (выглядит намного хуже) (просто опубликуйте функцию копирования подписи, поскольку это единственное, что меняется)

Код: Выделить всё

        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);
});
});
});
}

Использование файла .png более низкого качества после загрузки на веб-сайт, который преобразуется в копирование и вставку изображения.

Код: Выделить всё





Email Signature Site


body {
background-color: #333333;
color: white;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.content-box {
background-color: #4d4d4d;
padding: 20px;
margin: 40px auto;
width: 90%;
max-width: 800px;
border-radius: 10px;
}

h1 {
text-align: left;
margin-top: 30px;
}

p {
text-align: left;
margin: 0px;
font-size: 16px;
line-height: 1.5;
}

input[type="text"] {
width: 100%;
max-width: 100%;
padding: 7px;
font-size: 16px;
border-radius: 5px;
background-color: #333333;
color: white;
}

button {
background-color: #C12142;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

a {
text-decoration: none;
border: none;
outline: none;
}

.email-signature {
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
padding: 10px;
border-radius: 5px;
width: fit-content;
margin: 0 auto;
}

.signature-image-wrapper {
position: relative;
display: inline-block;
text-align: left;
}

.signature-image-wrapper img {
display: block;
height: auto;
max-width: 100%;
}

.signature-text {
position: absolute;
top: 20px;
/* Adjust this to position text vertically */
left: 20px;
/* Adjust this to position text horizontally */
color: white;
font-family: Arial, sans-serif;
}

.signature-text p {
margin: 0;
line-height: 1.3;
}






Interapt Email Signature Creator
1. Enter your information below

2. Click the "Copy Me" button

3.  Follow steps for your operating system

[url=Windows Instructions.html]Windows[/url]  
[url=Mac Instructions.html]Mac[/url]  
[url=Web Instructions.html]Outlook Web[/url]

First Name:


Last Name:


Pronouns (They/Them):


Job Title:


Interapt Email:


Phone Number:



[img]Email Signature.png[/img]

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



Copy Me!




function formatPhoneNumber() {
const phoneInput = document.getElementById('phoneNumber');
let phoneNumber = phoneInput.value.replace(/\D/g, '');

if (phoneNumber.length > 3 && phoneNumber.length  6) {
phoneNumber = phoneNumber.slice(0, 3) + '-' + phoneNumber.slice(3, 6) + '-' + phoneNumber.slice(6, 10);
}

phoneInput.value = phoneNumber;
updateSignature();
return phoneNumber;
}

function updateSignature() {
const firstName = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;
const proNouns = document.getElementById('proNouns').value;
const jobTitle = document.getElementById('jobTitle').value;
const email = document.getElementById('email').value;
const phoneNumber = document.getElementById('phoneNumber').value;

const fullNameEl = document.getElementById('fullName');
const pronounsEl = document.getElementById('pronouns');
const jobTitleEl = document.getElementById('jobTitleText');
const emailEl = document.getElementById('emailText');
const phoneEl = document.getElementById('phoneText');

// Update full name and pronouns
fullNameEl.textContent = `${firstName} ${lastName}`;
pronounsEl.textContent = proNouns ? `(${proNouns})` : '';

// Update job title, email, and phone number
jobTitleEl.textContent = jobTitle;
emailEl.innerHTML = `[url=mailto:${email}]${email}[/url]`;
phoneEl.textContent = phoneNumber;

// Measure the width of the full name text and adjust pronoun position
requestAnimationFrame(() => {
const nameWidth = fullNameEl.offsetWidth;
pronounsEl.style.left = `${200 + nameWidth + 6}px`;
pronounsEl.style.top = '-12px';
});
}

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);
});
});
});
}

Подробнее здесь: https://stackoverflow.com/questions/796 ... te-and-pas

1767448399

Anonymous

Я создаю создатель подписи электронной почты для своей компании. Сам сайт работает, но у меня проблемы с копированием и вставкой. Если я использую .png, он копируется правильно, но качество по какой-то причине снижается после загрузки на веб-сайт. Если я использую .svg, он либо выглядит ужасно, если вы попытаетесь увеличить его, скопировать, а затем уменьшить копию. Или это выглядит хорошо, но огромно, если вы просто увеличите его и скопируете. .svg также выглядит намного лучше на самом сайте.
Увеличенный .svg (вставляется огромным)


[code]




Email Signature Site


body {
background-color: #333333;
color: white;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.content-box {
background-color: #4d4d4d;
padding: 20px;
margin: 40px auto;
width: 90%;
max-width: 800px;
border-radius: 10px;
}

h1 {
text-align: left;
margin-top: 30px;
}

p {
text-align: left;
margin: 0px;
font-size: 16px;
line-height: 1.5;
}

input[type="text"] {
width: 100%;
max-width: 100%;
padding: 7px;
font-size: 16px;
border-radius: 5px;
background-color: #333333;
color: white;
}

button {
background-color: #C12142;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

a {
text-decoration: none;
border: none;
outline: none;
}

.email-signature {
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
padding: 10px;
border-radius: 5px;
width: fit-content;
margin: 0 auto;
}

.signature-image-wrapper {
position: relative;
display: inline-block;
text-align: left;
}

.signature-image-wrapper img {
display: block;
height: auto;
max-width: 100%;
}

.signature-text {
position: absolute;
top: 20px;
/* Adjust this to position text vertically */
left: 20px;
/* Adjust this to position text horizontally */
color: white;
font-family: Arial, sans-serif;
}

.signature-text p {
margin: 0;
line-height: 1.3;
}






Interapt Email Signature Creator
1. Enter your information below

2. Click the "Copy Me" button

3.  Follow steps for your operating system

[url=Windows Instructions.html]Windows[/url]  
[url=Mac Instructions.html]Mac[/url]  
[url=Web Instructions.html]Outlook Web[/url]

First Name:


Last Name:


Pronouns (They/Them):


Job Title:


Interapt Email:


Phone Number:



[img]450 Signature.svg[/img]

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



Copy Me!




function formatPhoneNumber() {
const phoneInput = document.getElementById('phoneNumber');
let phoneNumber = phoneInput.value.replace(/\D/g, '');

if (phoneNumber.length > 3 && phoneNumber.length  6) {
phoneNumber = phoneNumber.slice(0, 3) + '-' + phoneNumber.slice(3, 6) + '-' + phoneNumber.slice(6, 10);
}

phoneInput.value = phoneNumber;
updateSignature();
return phoneNumber;
}

function updateSignature() {
const firstName = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;
const proNouns = document.getElementById('proNouns').value;
const jobTitle = document.getElementById('jobTitle').value;
const email = document.getElementById('email').value;
const phoneNumber = document.getElementById('phoneNumber').value;

const fullNameEl = document.getElementById('fullName');
const pronounsEl = document.getElementById('pronouns');
const jobTitleEl = document.getElementById('jobTitleText');
const emailEl = document.getElementById('emailText');
const phoneEl = document.getElementById('phoneText');

fullNameEl.textContent = `${firstName} ${lastName}`;
pronounsEl.textContent = proNouns ? `(${proNouns})` : '';

jobTitleEl.textContent = jobTitle;
emailEl.innerHTML = `[url=mailto:${email}]${email}[/url]`;
phoneEl.textContent = phoneNumber;

requestAnimationFrame(() =>  {
const nameWidth = fullNameEl.offsetWidth;
pronounsEl.style.left = `${200 + nameWidth + 6}px`;
pronounsEl.style.top = '-12px';
});
} //  {
// Create a blob from the canvas and copy it to the clipboard
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]



Отобразите .svg в более высоком качестве, не увеличивая масштаб прошлого (выглядит намного хуже) (просто опубликуйте функцию копирования подписи, поскольку это единственное, что меняется)
[code]        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);
});
});
});
}
[/code]
Использование файла .png более низкого качества после загрузки на веб-сайт, который преобразуется в копирование и вставку изображения.


[code]




Email Signature Site


body {
background-color: #333333;
color: white;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.content-box {
background-color: #4d4d4d;
padding: 20px;
margin: 40px auto;
width: 90%;
max-width: 800px;
border-radius: 10px;
}

h1 {
text-align: left;
margin-top: 30px;
}

p {
text-align: left;
margin: 0px;
font-size: 16px;
line-height: 1.5;
}

input[type="text"] {
width: 100%;
max-width: 100%;
padding: 7px;
font-size: 16px;
border-radius: 5px;
background-color: #333333;
color: white;
}

button {
background-color: #C12142;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

a {
text-decoration: none;
border: none;
outline: none;
}

.email-signature {
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
padding: 10px;
border-radius: 5px;
width: fit-content;
margin: 0 auto;
}

.signature-image-wrapper {
position: relative;
display: inline-block;
text-align: left;
}

.signature-image-wrapper img {
display: block;
height: auto;
max-width: 100%;
}

.signature-text {
position: absolute;
top: 20px;
/* Adjust this to position text vertically */
left: 20px;
/* Adjust this to position text horizontally */
color: white;
font-family: Arial, sans-serif;
}

.signature-text p {
margin: 0;
line-height: 1.3;
}






Interapt Email Signature Creator
1. Enter your information below

2. Click the "Copy Me" button

3.  Follow steps for your operating system

[url=Windows Instructions.html]Windows[/url]  
[url=Mac Instructions.html]Mac[/url]  
[url=Web Instructions.html]Outlook Web[/url]

First Name:


Last Name:


Pronouns (They/Them):


Job Title:


Interapt Email:


Phone Number:



[img]Email Signature.png[/img]

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



Copy Me!




function formatPhoneNumber() {
const phoneInput = document.getElementById('phoneNumber');
let phoneNumber = phoneInput.value.replace(/\D/g, '');

if (phoneNumber.length > 3 && phoneNumber.length  6) {
phoneNumber = phoneNumber.slice(0, 3) + '-' + phoneNumber.slice(3, 6) + '-' + phoneNumber.slice(6, 10);
}

phoneInput.value = phoneNumber;
updateSignature();
return phoneNumber;
}

function updateSignature() {
const firstName = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;
const proNouns = document.getElementById('proNouns').value;
const jobTitle = document.getElementById('jobTitle').value;
const email = document.getElementById('email').value;
const phoneNumber = document.getElementById('phoneNumber').value;

const fullNameEl = document.getElementById('fullName');
const pronounsEl = document.getElementById('pronouns');
const jobTitleEl = document.getElementById('jobTitleText');
const emailEl = document.getElementById('emailText');
const phoneEl = document.getElementById('phoneText');

// Update full name and pronouns
fullNameEl.textContent = `${firstName} ${lastName}`;
pronounsEl.textContent = proNouns ? `(${proNouns})` : '';

// Update job title, email, and phone number
jobTitleEl.textContent = jobTitle;
emailEl.innerHTML = `[url=mailto:${email}]${email}[/url]`;
phoneEl.textContent = phoneNumber;

// Measure the width of the full name text and adjust pronoun position
requestAnimationFrame(() => {
const nameWidth = fullNameEl.offsetWidth;
pronounsEl.style.left = `${200 + nameWidth + 6}px`;
pronounsEl.style.top = '-12px';
});
}

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]


 

Подробнее здесь: [url]https://stackoverflow.com/questions/79607214/image-either-looks-worse-or-is-extra-large-after-copying-from-my-website-and-pas[/url]