#javascript #reactjs
Вопрос:
чего я пытаюсь добиться, так это иметь компонент, который в любой момент не виден пользователю, затем превратить его в изображение, а затем перенести в буфер обмена пользователя. Это то, что у меня есть прямо сейчас.
const generateImage = () => {
const component = document.getElementById("component");
if (component) {
toBlob(component)
.then(function (blob: any) {
const textBlob: any = new Blob(["I am a string"], {
type: "text/plain",
});
navigator.clipboard
.write([
new ClipboardItem({
"image/png": blob,
"text/plain": textBlob,
}),
])
.catch((e) => console.log(e));
})
.catch((err) => console.log(err));
}
};
Это прекрасно работает, когда компонент находится в поле моего зрения (даже если изображение получилось немного сдвинутым вправо? но это, вероятно, связано с моим стилем), но когда я попробовал что-то вроде
position: absolute;
left: -1000%;
Это оставило бы меня с пустым блокнотом.
Я наткнулся на что-то вроде OffscreenCanvas, но я понятия не имею, как его правильно использовать, и, возможно, есть более чистое решение моей проблемы.
Комментарии:
1. Вы должны использовать ссылку вместо
document.getElementById(), но я не вижу, как положение холста может повлиять на функцию toBlob.2. Я сам не вебдев, просто пытаюсь как — то заставить его работать. Я использую html-преобразование в изображение, и положение компонента в основном меняет внешний вид большого двоичного объекта. Я попробую через секунду, может быть, это что-то изменит
3. Также, если я установлю видимость:скрыто; я тоже получу пустое изображение
Ответ №1:
Я вроде как исправил проблему, используя другую библиотеку, чтобы сначала преобразовать div в холст, а затем такой холст в большой двоичный объект.
Комментарии:
1. Не могли бы вы указать, какую другую библиотеку вы использовали, пожалуйста?
2. Да, я сначала включил закадровый компонент с html2canvas в canvas, а затем использовал на нем встроенную функцию toBlob.