Html2canvas: Междоменные изображения не отображаются (без CORS или прокси)

Возможно, вам следует использовать useCORS ptoperty как true, он предназначен для кроссдоменного веб-контента

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

Ты пробовал мое исправление? https://github.com/niklasvh/html2canvas/pull/554

Вероятно, следует установить для allowTaint значение true, но тогда вы не сможете экспортировать визуализированный результат.

Не понимаю, почему бы не использовать userCORS или proxy ... Они просто созданы для таких задач.

@brcontainer Поскольку они не работают в последней версии, см. мое исправление: https://github.com/niklasvh/html2canvas/pull/554

@ Cristy94 Конечно !! Отличное исправление! Спасибо!

Привет @ Cristy94!

Я получаю изображения из CMS (Contentful) в своем HTML, а затем пытаюсь сгенерировать PDF из этого HTML.
Но в сгенерированном PDF-файле изображения отсутствуют (похоже, проблема перекрестного происхождения).
Пожалуйста, предложите мне, как я могу избавиться от этой проблемы.
Ниже мой код:

function downloadPDF () {
var canvasToImage = function (canvas) {
var img = новое изображение ();
var dataURL = canvas.toDataURL ('image / png');
img.crossOrigin = "Анонимный";
img.src = dataURL;
вернуть img;
};

var canvasShiftImage = function (oldCanvas, shiftAmt) {
shiftAmt = parseInt (shiftAmt) || 0;
если (! shiftAmt) {вернуть oldCanvas; }

var newCanvas = document.createElement ('холст');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext ('2d');
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

var img = canvasToImage (oldCanvas);
ctx.drawImage (img, 0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

return newCanvas;
};

var canvasToImageSuccess = function (canvas) {
var pdf = новый jsPDF ('l', 'px'),
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
totalPdfHeight = 0,
htmlPageHeight = canvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
SafetyNet = 0;

while (totalPdfHeight <htmlPageHeight && safetyNet <15) {
var newCanvas = canvasShiftImage (холст, totalPdfHeight);
pdf.addImage (newCanvas, 'png, 0, 0, pdfPageWidth, 0, null,' НЕТ ');
// var alias = Math.random (). toString (35);
// pdf.addImage (newCanvas, 0, 0, pdfPageWidth, 0, 'png', псевдоним, 'НЕТ');

totalPdfHeight + = (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if (totalPdfHeight <htmlPageHeight) {
pdf.addPage ();
}
SafetyNet ++;
}

var pageName = document.location.pathname.match (/ [^ /] + $ /) [0];
pdf.save (pageName + '.pdf');
};

html2canvas ($ ('body') [0],
{
onrendered: function (canvas) {
canvasToImageSuccess (холст);
}
});
}

Эй, будет ли это исправление? Изображения CORS здесь также не отображаются :(

Привет Рукев,

Вы можете сделать это, передав одну из опций в функции html2canvas. И поверьте, это обязательно сработает :)

html2canvas ($ ('# div_pdf') [0],
{
useCORS: true, // Передавая этот параметр в функции, изображения перекрестного происхождения будут правильно отображаться в загруженной версии PDF
onrendered: function (canvas) {
canvasToImageSuccess (холст);
}
});
Для получения дополнительной информации вы можете посмотреть документацию библиотеки html2canvas по следующему URL-адресу:
https://html2canvas.hertzen.com/documentation.html

Привет @ gauravmishra24 , к сожалению, это не работает. Проблема в том, что я хочу включить изображения с сервера, на котором у сервера есть флаг

Access-Control-Allow-Origin: *

не установлен

:(

Привет Рукев,

Не могли бы вы опубликовать фрагмент кода?

Чтобы я мог получше рассмотреть то же самое ...

Привет,

Есть ли какое-нибудь исправление для этого? Даже если для параметра useCORS установлено значение true, изображения не загружаются. По-прежнему возникает ошибка перекрестного происхождения, как указано выше.

Кроме того, не уверен в решении Cristy94 в распределенном файле html2Canvas.js. Даже после изменения кода в распределенном файле, согласно https://github.com/niklasvh/html2canvas/pull/554/commit/87d44359be73075ba4d5f36d6e1c8b88b7444402, он тоже не работает.

Для другой альтернативы, с настройками прокси, есть ли какое-либо решение для приложения angular 2?
В списке текущего сайта (https://github.com/niklasvh/html2canvas/wiki/Proxies) его нет!

Это все еще проблема с версией 1.0.0 ? Если да, не могли бы вы поделиться примером на jsfiddle .

Эта проблема была автоматически закрыта, так как на наш запрос о дополнительной информации от первоначального автора не поступило ответа. Имея только ту информацию, которая в настоящее время является проблемой, у нас недостаточно информации для принятия мер. Если у вас есть или вы найдете нужные нам ответы, свяжитесь с нами, чтобы мы могли продолжить расследование.

@niklasvh Вот мой пример кода с v1.0.0:
https://codepen.io/Onlylonger/pen/ppjPKX
тот же вопрос. спасибо тебе

Кто-нибудь знает какой-нибудь другой плагин. Это не работало с запросом других серверов. Нет подходящего примера для прокси.

@vinayistar, вы можете попробовать мои изменения, см. ссылку https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

Использование useCORS и установка атрибута img crossOrigin:anonymous

{ useCORS: false, allowTaint: true } это сработало для меня

Мое решение этой проблемы - преобразование src изображения в Base64.

const img = document.querySelector('#img')
fetch(img.src)
  .then(res => res.blob())
  .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    })
  )
  .then(dataURL => {
    img.src = dataURL
    return html2canvas(element)
  } )

@todoi Можете ли вы предоставить образец этого с помощью jspdf.

@ nishanta454
Это тот пример, который я написал. html2canvas отображает изображения с перекрестным происхождением .
В этом примере я использую cors -where, чтобы добавить заголовки CORS в запрос прокси-изображения.

Первое, что нам нужно, это сервер, настроенный для размещения изображений с заголовком Access-Control-Allow-Origin, настроенный для разрешения доступа к файлам изображений из разных источников.
из CORS_enabled_image