Html2canvas: 교차 도메인 이미지가 렌더링되지 않음(CORS 또는 프록시 없음)

어쩌면 useCORS ptoperty를 true로 사용해야 할 수도 있습니다. 크로스 도메인 웹 콘텐츠를 위한 것입니다.

useCORS 하면 이미지 캡처가 실패합니다. 내가 겪고 있는 문제는 외부 도메인에서 이미지를 가져오는 데 실패하지 않고 캡처에서 이미지를 렌더링하지 않기 때문에 이상합니다.

내 수정을 시도 했습니까? https://github.com/niklasvh/html2canvas/pull/554

allowTaint 를 true로 설정해야 하지만 렌더링된 결과를 내보낼 수 없습니다.

userCORS 또는 proxy 사용하지 않는 이유를 이해할 수 없습니다. 이러한 문제를 위해 만든 것입니다.

@brcontainer 최신 버전에서는 작동하지 않으므로 내 수정 사항을 참조하세요 .

@Cristy94 맞아요 !! 훌륭한 수정! 감사 해요!

안녕하세요 @Cristy94 ,

내 HTML의 CMS(Contentful)에서 이미지를 가져온 다음 해당 HTML의 PDF를 생성하려고 합니다.
하지만 생성된 PDF에서 이미지가 누락되었습니다.(교차 출처 문제인 것 같습니다).
어떻게 하면 이 문제를 해결할 수 있는지 제안해 주십시오.
아래는 내 코드입니다.

함수 다운로드PDF() {
var canvasToImage = 함수(캔버스){
var img = 새로운 이미지();
var dataURL = 캔버스.toDataURL('이미지/png');
img.crossOrigin = "익명";
img.src = 데이터 URL;
이미지 반환;
};

var canvasShiftImage = 기능(oldCanvas,shiftAmt){
shiftAmt = parseInt(shiftAmt) || 0;
if(!shiftAmt){ oldCanvas 반환; }

var newCanvas = document.createElement('캔버스');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
ctx.mozImageSmoothingEnabled = 거짓;
ctx.webkitImageSmoothingEnabled = 거짓;
ctx.msImageSmoothingEnabled = 거짓;
ctx.imageSmoothingEnabled = 거짓;

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

반환 newCanvas;
};

var canvasToImageSuccess = 기능(캔버스){
var pdf = 새로운 jsPDF('l','px'),
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
총 PDF 높이 = 0,
html페이지 높이 = 캔버스.높이,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
안전망 = 0;

동안(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', alias, 'NONE');

totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if(총PdfHeight < html페이지 높이){
pdf.addPage();
}
세이프티넷++;
}

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

html2canvas($('바디')[0],
{
렌더링: 함수(캔버스){
CanvasToImageSuccess(캔버스);
}
});
}

이봐, 거기에 대한 수정 사항이 있습니까? 여기에서도 렌더링되지 않은 CORS 이미지 :(

안녕하세요 루코프입니다.

html2canvas 함수에서 옵션 중 하나를 전달하면 됩니다. 그리고 이것이 확실히 효과가 있을 거라고 믿으세요 :)

html2canvas($('#div_pdf')[0],
{
useCORS: true, // 함수에서 이 옵션을 전달하면 Cross origin 이미지가 다운로드된 PDF 버전에서 제대로 렌더링됩니다.
onrendered: 함수(캔버스) {
CanvasToImageSuccess(캔버스);
}
});
추가 정보는 아래 URL에서 html2canvas 라이브러리 문서를 참조하세요.
https://html2canvas.hertzen.com/documentation.html

안녕하세요 @gauravmishra24 , 불행히도 이것은 작동하지 않습니다. 문제는 서버에 플래그가 있는 서버의 이미지를 포함하고 싶다는 것입니다.

Access-Control-Allow-Origin: *

설정 되지 않음

:(

안녕하세요 루코프입니다.

코드 스니펫을 게시해 주시겠습니까?

같은 모습을 더 잘 볼 수 있도록.....

안녕하세요,

이에 대한 수정 사항이 있습니까? useCORS를 true로 설정해도 이미지가 다운로드되지 않습니다. 위에서 언급한 것처럼 여전히 교차 출처 오류가 발생합니다.

또한 분산 html2Canvas.js 파일의 Cristy94 솔루션에 대해 잘 모르겠습니다. 분산 파일에서 코드를 변경한 후에도 https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402에 따라 작동하지 않습니다.

프록시 설정을 사용하는 다른 대안의 경우 Angular 2 애플리케이션에 대한 솔루션이 있습니까?
현재 사이트(https://github.com/niklasvh/html2canvas/wiki/Proxies) 목록에 없습니다!

이것은 여전히 v1.0.0 의 문제입니까? 그렇다면 jsfiddle에 대한 예를

이 호는 원저자의 추가 정보 요청에 대한 응답이 없었기 때문에 자동으로 종료되었습니다. 현재 문제에 있는 정보만으로는 조치를 취하기에 충분한 정보가 없습니다. 더 조사할 수 있도록 필요한 답변이 있거나 찾으면 연락해 주십시오.

@niklasvh 다음은 v1.0.0이 포함된 codepen의 예입니다.
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 이 샘플을

@nishanta454
제가 작성한 예시입니다. html2canvas는 교차 원점 이미지를 렌더링 합니다.
이 예에서는 cors-anywhere 를 사용하여 CORS 헤더를 프록시 이미지 요청에 추가합니다.

가장 먼저 필요한 것은 이미지 파일에 대한 교차 출처 액세스를 허용하도록 구성된 Access-Control-Allow-Origin 헤더를 사용하여 이미지를 호스팅하도록 구성된 서버입니다.
CORS_enabled_image에서