Эта фича называется Live Text, а по сути, это оптическое распознавание символов, OCR, optical character recognition. К сожалению, у неё пока нет АПИ, чтобы подсказать правильный текст или запретить его выделение.
В простых случаях, например, для изображений, замещающих заголовки, можно «подхачить» процедуру копирования текста. Если клиент выделяет и копирует текст с такого изображения, будем помещать в буфер обмена правильный текст. Покажу на примере.
Соберём заголовок с заменой текста на изображение:
<h1 class="textHide">
Визуализация данных
<img src="header-title.png">
</h1>.textHide {
font: 0/0 a !important;
text-shadow: none !important;
}Добавим обработчик события копирования к изображению:
// Находим все элементы, заменяемые изображениями
Array.from(document.querySelectorAll('.textHide')).forEach(el => {
// Получаем текст заголовка
const properText = el.textContent
// Обрабатываем событие копирования
el.addEventListener('copy', (e) => {
e.preventDefault()
// Переписываем буфер обмена, вставляя в него правильный текст из заголовка
e.clipboardData.setData('text/plain', properText)
})
})
Визуализация данных![]()
Осторожно, у этого хака есть проблемы. Скажем, в контекстом меню по‑прежнему будет что угодно:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.