<p>html2canvas не отображает изображения, расположенные в элементе</p>

Привет.
У меня точно такая же проблема.

Та же проблема здесь.
Я пытаюсь сделать снимок твита, но прикрепленное изображение не проходит.
Изображение прилагается.

Я считаю, что изображения с других сайтов заблокированы по умолчанию, потому что они «загрязняют холст HTML5». Вот вариант, который вам нужно использовать при вызове рендерера:

атрибут: allowTaint
тип: логический
по умолчанию: ложь
описание: Разрешить ли изображениям из разных источников портить холст

Нашел здесь: https://html2canvas.hertzen.com/documentation.html.

та же проблема....
и мои изображения исходят из того же источника

Я столкнулся с той же проблемой, лучший способ решить проблему - запустить проект на сервере и посмотреть результат.
В моем случае раньше я запускал html-файлы напрямую без какого-либо сервера, но затем, немного погуглив, я нашел решение попробовать это на сервере.
Я попробовал свой проект с помощью Visual Studio, и он работал отлично, мои изображения внутри тега div также копировались.

Вставьте опцию allowTaint , чтобы просмотреть все изображения на скриншоте.

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

У меня есть список элементов div.
Когда я пытаюсь захватить каждый div по идентификатору, часть захваченной половинной части div захвачена, а часть изображения захвата div пуста.
подскажите в чем проблема и как ее исправить. @

Та же проблема. Спасибо за решение.

html2canvas не конвертирует изображения с заданным src в формат base64. Я распечатал журнал. Пожалуйста, помогите

1283 мс html2canvas: документ клонирован html2canvas.js:1487
3936 мс html2canvas: инициализированный CanvasRenderer с размером 601 x 965 html2canvas.js:1487
3937 мс html2canvas: запуск NodeParser html2canvas.js:1487
4014 мс html2canvas: выбрано узлов, всего: 10 html2canvas.js:1487
4015 мс html2canvas: вычисление клипов переполнения html2canvas.js:1487
4034 мс html2canvas: начало загрузки изображений html2canvas.js:1487
4044 мс html2canvas: добавлено изображение № 1 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047 мс html2canvas: добавлено изображение № 2 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDasLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051 мс html2canvas: завершен поиск изображений html2canvas.js:1487
4052 мс html2canvas: успешно загружено изображение №1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", изображение: img, испорчено: null, обещание: h}
html2canvas.js: 1487
4056 мс html2canvas: успешно загружено изображение #2
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted: null, promise: h}
html2canvas.js: 1487
4059 мс html2canvas: изображения загружены, начинается синтаксический анализ html2canvas.js:1487
4060 мс html2canvas: создание контекстов наложения html2canvas.js:1487
4064 мс html2canvas: сортировка контекстов стека html2canvas.js:1487
4066 мс html2canvas: очередь рендеринга создана из 9 элементов html2canvas.js:1487
4104 мс html2canvas: завершен рендеринг html2canvas.js:1487
4109ms html2canvas: Обрезка холста по адресу: слева: 28 сверху: 529 ширина: 545 высота: 0 html2canvas.js:1487
4111 мс html2canvas: результирующий урожай с шириной 545 и высотой 0 с x 28 и y 529

html2canvsas не отображает изображения, переданные с помощью base64 src, вызов не возвращается к «onrendered»
функция. Пожалуйста, помогите

1283 мс html2canvas: документ клонирован html2canvas.js:1487
3936 мс html2canvas: инициализированный CanvasRenderer с размером 601 x 965 html2canvas.js:1487
3937 мс html2canvas: запуск NodeParser html2canvas.js:1487
4014 мс html2canvas: выбрано узлов, всего: 10 html2canvas.js:1487
4015 мс html2canvas: вычисление клипов переполнения html2canvas.js:1487
4034 мс html2canvas: начало загрузки изображений html2canvas.js:1487
4044 мс html2canvas: добавлено изображение № 1 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047 мс html2canvas: добавлено изображение № 2 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDasLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051 мс html2canvas: завершен поиск изображений html2canvas.js:1487
4052 мс html2canvas: успешно загружено изображение №1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", изображение: img, испорчено: null, обещание: h}
html2canvas.js: 1487
4056 мс html2canvas: успешно загружено изображение #2
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted: null, promise: h}
html2canvas.js: 1487
4059 мс html2canvas: изображения загружены, начинается синтаксический анализ html2canvas.js:1487
4060 мс html2canvas: создание контекстов наложения html2canvas.js:1487
4064 мс html2canvas: сортировка контекстов стека html2canvas.js:1487
4066 мс html2canvas: очередь рендеринга создана из 9 элементов html2canvas.js:1487
4104 мс html2canvas: завершен рендеринг html2canvas.js:1487
4109ms html2canvas: Обрезка холста по адресу: слева: 28 сверху: 529 ширина: 545 высота: 0 html2canvas.js:1487
4111 мс html2canvas: результирующий урожай с шириной 545 и высотой 0 с x 28 и y 529

@SebasAlvarez - опция allowTaint больше не работает. Это все еще работает для вас?

@SebasAlvarez , @sandeepnagra :
Я использую этот код для скриншота изображения в новой вкладке, но изображение не отображается, а также я устал от «a llowTaint: true », он работает только внутри того же окна, но не в новой вкладке.
это мой код:
функция рендеринга () {
html2canvas(document.body, {allowTaint: true,
при рендеринге: функция (холст) {
document.body.appendChild (холст);
window.open(холст.toDataURL());
}
});
}
подскажите в чем проблема, как решить??

@venkateshduddu - вы сначала переключаете фокус на новую вкладку, прежде чем делать снимок экрана?

@sandeepnagra - без сандип, я просто использую событие клика. еще один снимок экрана работает, если я использую локальный путь к изображению, но путь к серверу не работает в новой вкладке.

@venkateshduddu - событие щелчка не переместит фокус на новую вкладку автоматически, вы должны это активировать. Так что попробуйте сначала, я на 100% уверен, что это решит вашу проблему.

Что касается пути к серверу, этот сетевой диск аутентифицирован? Если да, проходите ли вы аутентификацию перед загрузкой файлов на сетевой диск? Совсем другое дело, если вы хотите загрузить их в корзину S3.

привет, когда я пытаюсь просмотреть iframe с внутренней IP-камерой, он возвращает пустое изображение, пожалуйста, не могли бы вы мне помочь?

Если бы я использовал allowTaint, то опция загрузки не работала. Пожалуйста помоги

та же проблема....
и мои изображения исходят из того же источника

Я только что исправил эту проблему.
Пожалуйста, включите параметр «useCORS» в «true»
коды ниже:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Большое спасибо @Sotyyoyo , моя ошибка была исправлена ​​​​с помощью приведенного выше кода. Спасибо Спасибо

@Sotyyoyo Большое спасибо, братан, храни тебя бог <3

@Sotyyoyo Большое спасибо, это работа для меня :)

Изображение не отображается, есть ли проблема в моем коде?

html2canvas(document.getElementById("html-2-pdfwrapper"), {
регистрация: правда,
письмоВизуализация: 1,
разрешитьTaint: ложь,
использоватьCORS: правда,
при рендеринге: функция (холст) {
var img = canvas.toDataURL('image/png');
var doc = новый jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test2.pdf');
}
});

та же проблема....
и мои изображения исходят из того же источника

Я только что исправил эту проблему.
Пожалуйста, включите параметр «useCORS» в «true»
коды ниже:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

это работает! Спасибо!

та же проблема....
и мои изображения исходят из того же источника

Я только что исправил эту проблему.
Пожалуйста, включите параметр «useCORS» в «true»
коды ниже:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

это правильно /

html2canvas(document.querySelector("#id-of-element"),{ регистрация: true, letterRendering: 1, allowTaint: false, useCORS: true}).then(canvas => {
var imgData = canvas.toDataURL('image/jpeg');
});

Вставьте опцию allowTaint , чтобы просмотреть все изображения на скриншоте.

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

Спасибо. Это работает нормально.

Но я не могу клонировать стиль изображения на холст

Я все еще сталкиваюсь с той же проблемой, даже после использования вышеуказанных параметров ниже мой код.
var element = document.querySelector("#map-image-id");
html2canvas (элемент, {
регистрация: правда,
письмоВизуализация: 1,
разрешитьTaint: ложь,
использоватьCORS: правда
}).then(canvasElm => {
var imageType = "изображение/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI (данные изображения);
console.log("источник", источник);
console.log("данные изображения", imageData);

Я все еще сталкиваюсь с той же проблемой, даже после использования вышеуказанных параметров ниже мой код.
var element = document.querySelector("#map-image-id");
html2canvas (элемент, {
регистрация: правда,
письмоВизуализация: 1,
разрешитьTaint: ложь,
использоватьCORS: правда
}).then(canvasElm => {
var imageType = "изображение/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI (данные изображения);
console.log("источник", источник);
console.log("данные изображения", imageData);

то же самое касается тебя. Вы решили это?

Я все еще сталкиваюсь с той же проблемой, даже после использования вышеуказанных параметров ниже мой код.
var element = document.querySelector("#map-image-id");
html2canvas (элемент, {
регистрация: правда,
письмоВизуализация: 1,
разрешитьTaint: ложь,
использоватьCORS: правда
}).then(canvasElm => {
var imageType = "изображение/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI (данные изображения);
console.log("источник", источник);
console.log("данные изображения", imageData);

такая же проблема у меня помогите

Я вижу ту же проблему. Что я делаю неправильно?

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});

Ниже также работает, если вы хотите включить <img src-"..." /> :

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });

Мой контент содержит изображение, полученное из Aws.s3(). Вышеупомянутые комментарии не работают для моего случая.

html2canvas(content, {letterRendering: 1,allowTaint: false,useCORS:true})
.тогда (холст => {
const imgData = canvas.toDataURL('image/png');
console.log(имгданные);
const pdf = новый jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('скачать.pdf');
});

Выходной холст содержит только пустое поле вместо изображения. У кого-нибудь есть решение для моего случая?

Мой контент содержит изображение, полученное из Aws.s3(). Вышеупомянутые комментарии не работают для моего случая.

html2canvas(content, {letterRendering: 1,allowTaint: false,useCORS:true})
.тогда (холст => {
const imgData = canvas.toDataURL('image/png');
console.log(имгданные);
const pdf = новый jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('скачать.pdf');
});

Выходной холст содержит только пустое поле вместо изображения. У кого-нибудь есть решение для моего случая?

такая же проблема здесь. изображения из корзины S3

та же проблема....
и мои изображения исходят из того же источника

Я только что исправил эту проблему.
Пожалуйста, включите параметр «useCORS» в «true»
коды ниже:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Спасибо
У меня работает ❤❤

Доступ к изображению по ссылке « https://image/logo » из источника « http://localhost :3000» заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».
Является ли это причиной того, что мой логотип не отображается в файле PDF?
Остается весь текст с примененным css и логотипом бренда, который находится в моей статической папке.
Пожалуйста, ответьте, нужна помощь в этом. Я пытаюсь это сделать более 2 недель.

Для всех, кто приходит сюда, после многих попыток я обнаружил, что для получения изображений из внешних ресурсов (таких как корзина S3) вы должны включить как useCORS = true для html2canvas, так и включить политику CORS для изображений, обслуживаемых из S3.

Я решил это с помощью прокси-сервера html2canvas. Вы можете увидеть некоторые подробности об использовании и тестировании здесь:
https://github.com/zeusstl/html2canvas-proxy-nodejs