<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 요소 목록이 있습니다.
id로 각 div를 캡처하려고하면 div 절반 부분이 캡처되고 div의 캡처 이미지 중 일부가 비어 있습니다.
무엇이 문제이고 어떻게 고칠 수 있는지 말해 줄 수 있습니까? @

같은 문제입니다. 해결해 주셔서 감사합니다.

html2canvas가 base64 형식의 src에 이미지를 변환하지 않습니다. 로그를 인쇄했습니다. 친절하게 도와주세요

1283ms html2canvas: 복제된 문서 html2canvas.js:1487
3936ms html2canvas: 크기가 601 x 965인 초기화된 CanvasRenderer html2canvas.js:1487
3937ms html2canvas: NodeParser 시작 html2canvas.js:1487
4014ms html2canvas: 가져온 노드, 총계: 10 html2canvas.js:1487
4015ms html2canvas: 오버플로 클립 계산 html2canvas.js:1487
4034ms html2canvas: 이미지 가져오기 시작 html2canvas.js:1487
4044ms html2canvas: 이미지 #1 데이터 추가:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: 이미지 #2 데이터 추가:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDASLDBkSEw8UHRofHh0aH html2canvas.js:14
4051ms html2canvas: 이미지 검색 완료 html2canvas.js:1487
4052ms html2canvas: 성공적으로 로드된 이미지 #1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKACiiigD/2Q==", 이미지: img, 오염된: null, 약속: h}
html2canvas.js:1487
4056ms html2canvas: 성공적으로 로드된 이미지 #2
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", 이미지: img, 오염됨: null, 약속
html2canvas.js:1487
4059ms html2canvas: 이미지 로드, html2canvas.js:1487 구문 분석 시작
4060ms html2canvas: 스택 컨텍스트 만들기 html2canvas.js:1487
4064ms html2canvas: 스택 컨텍스트 정렬 html2canvas.js:1487
4066ms html2canvas: 9개 항목으로 생성된 렌더링 대기열 html2canvas.js:1487
4104ms html2canvas: html2canvas.js:1487 렌더링 완료
4109ms html2canvas: 캔버스 자르기: 왼쪽: 28 상단: 529 너비: 545 높이: 0 html2canvas.js:1487
4111ms html2canvas: 너비가 545이고 높이가 0이고 x 28 및 y 529인 결과 자르기

html2canvsas가 base64 src로 제공된 이미지를 렌더링하지 않음, 호출이 "onrendered"로 돌아오지 않음
함수. 친절하게 도와주세요

1283ms html2canvas: 복제된 문서 html2canvas.js:1487
3936ms html2canvas: 크기가 601 x 965인 초기화된 CanvasRenderer html2canvas.js:1487
3937ms html2canvas: NodeParser 시작 html2canvas.js:1487
4014ms html2canvas: 가져온 노드, 총계: 10 html2canvas.js:1487
4015ms html2canvas: 오버플로 클립 계산 html2canvas.js:1487
4034ms html2canvas: 이미지 가져오기 시작 html2canvas.js:1487
4044ms html2canvas: 이미지 #1 데이터 추가:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: 이미지 #2 데이터 추가:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDASLDBkSEw8UHRofHh0aH html2canvas.js:14
4051ms html2canvas: 이미지 검색 완료 html2canvas.js:1487
4052ms html2canvas: 성공적으로 로드된 이미지 #1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKACiiigD/2Q==", 이미지: img, 오염된: null, 약속: h}
html2canvas.js:1487
4056ms html2canvas: 성공적으로 로드된 이미지 #2
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", 이미지: img, 오염됨: null, 약속
html2canvas.js:1487
4059ms html2canvas: 이미지 로드, html2canvas.js:1487 구문 분석 시작
4060ms html2canvas: 스택 컨텍스트 만들기 html2canvas.js:1487
4064ms html2canvas: 스택 컨텍스트 정렬 html2canvas.js:1487
4066ms html2canvas: 9개 항목으로 생성된 렌더링 대기열 html2canvas.js:1487
4104ms html2canvas: html2canvas.js:1487 렌더링 완료
4109ms html2canvas: 캔버스 자르기: 왼쪽: 28 상단: 529 너비: 545 높이: 0 html2canvas.js:1487
4111ms html2canvas: 너비가 545이고 높이가 0이고 x 28 및 y 529인 결과 자르기

@SebasAlvarez - allowTaint 옵션이 더 이상 작동하지 않습니다. 여전히 효과가 있습니까?

@SebasAlvarez , @sandeepnagra :
새 탭의 이미지 스크린샷에 이 코드를 사용하고 있지만 이미지가 렌더링되지 않고 "a llowTaint:true "에 지쳤습니다. 동일한 창 내에서만 작동하지만 새 탭에서는 작동하지 않습니다.
이것은 내 코드입니다.
함수 렌더(){
html2canvas(document.body, { allowTaint : 참,
렌더링: 함수(캔버스) {
document.body.appendChild(캔버스);
window.open(canvas.toDataURL());
}
});
}
문제가 무엇인지 알려주실 수 있습니까? 어떻게 해결할 수 있습니까?

@venkateshduddu - 스크린샷을 찍기 전에 먼저 새 탭으로 초점을 옮기고 있습니까?

@sandeepnagra - sandeep 없음, 클릭 이벤트만 사용 중입니다. 로컬 이미지 경로를 사용하지만 새 탭에서 서버 경로가 작동하지 않는 경우 한 가지 더 스크린샷이 작동합니다.

@venkateshduddu - 클릭 이벤트는 포커스를 새 탭으로 자동으로 이동하지 않으므로 트리거해야 합니다. 따라서 먼저 시도해 보십시오. 문제가 해결될 것이라고 100% 확신합니다.

서버 경로와 관련하여 해당 네트워크 드라이브가 인증되었습니까? 그렇다면 네트워크 드라이브에 파일을 업로드하기 전에 인증하고 있습니까? S3 버킷에 업로드하려는 경우 완전히 다른 이야기입니다.

안녕하세요, 내부 IP 카메라로 iframe을 스크리닝하려고 하면 무효 이미지가 반환됩니다. 도와주시겠습니까?

allowTaint를 사용한 경우 다운로드 옵션이 작동하지 않았습니다. 도와주세요

같은 문제....
내 이미지는 같은 출처에서 왔습니다.

방금 이 문제를 해결했습니다.
pls는 'useCORS' 옵션을 'true'로 설정합니다.
아래 코드:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

@Sotyoyo 정말 감사합니다. 제 버그는 위의 코드로 수정되었습니다. 감사합니다 감사합니다

@Sotyoyo 감사합니다 형님 축복합니다 <3

@Sotyoyo 정말 감사합니다.

이미지가 렌더링되지 않습니다. 내 코드에 문제가 있습니까?

html2canvas(document.getElementById("html-2-pdfwrapper"), {
로깅: 참,
문자 렌더링: 1,
allowTaint: 거짓,
useCORS: 사실,
렌더링: 함수(캔버스) {
var img = 캔버스.toDataURL('이미지/png');
var 문서 = 새로운 jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test2.pdf');
}
});

같은 문제....
내 이미지는 같은 출처에서 왔습니다.

방금 이 문제를 해결했습니다.
pls는 'useCORS' 옵션을 'true'로 설정합니다.
아래 코드:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

그것의 일! 고마워!

같은 문제....
내 이미지는 같은 출처에서 왔습니다.

방금 이 문제를 해결했습니다.
pls는 'useCORS' 옵션을 'true'로 설정합니다.
아래 코드:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

맞아요 /

html2canvas(document.querySelector("#id-of-element"),{ logging: true, letterRendering: 1, allowTaint: false, useCORS: true }).then(canvas => {
var imgData = 캔버스.toDataURL('이미지/jpeg');
});

모든 이미지를 스크린샷으로 보려면 allowTaint 옵션을 삽입하세요.

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

감사 해요. 잘 작동합니다.

하지만 이미지 스타일을 캔버스에 복제할 수 없습니다.

위의 옵션을 사용한 후에도 여전히 동일한 문제가 발생합니다.
var 요소 = document.querySelector("#맵 이미지 ID");
html2canvas(요소, {
로깅: 참,
문자 렌더링: 1,
allowTaint: 거짓,
useCORS: 사실
}).then(canvasElm => {
var imageType = "이미지/png";
var 이미지 데이터 = 캔버스Elm.toDataURL(이미지 유형);
var src = 인코딩URI(이미지 데이터);
console.log("src", src);
console.log("이미지 데이터", imageData);

위의 옵션을 사용한 후에도 여전히 동일한 문제가 발생합니다.
var 요소 = document.querySelector("#맵 이미지 ID");
html2canvas(요소, {
로깅: 참,
문자 렌더링: 1,
allowTaint: 거짓,
useCORS: 사실
}).then(canvasElm => {
var imageType = "이미지/png";
var 이미지 데이터 = 캔버스Elm.toDataURL(이미지 유형);
var src = 인코딩URI(이미지 데이터);
console.log("src", src);
console.log("이미지 데이터", imageData);

당신 같은. 해결하셨나요?

위의 옵션을 사용한 후에도 여전히 동일한 문제가 발생합니다.
var 요소 = document.querySelector("#맵 이미지 ID");
html2canvas(요소, {
로깅: 참,
문자 렌더링: 1,
allowTaint: 거짓,
useCORS: 사실
}).then(canvasElm => {
var imageType = "이미지/png";
var 이미지 데이터 = 캔버스Elm.toDataURL(이미지 유형);
var src = 인코딩URI(이미지 데이터);
console.log("src", src);
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(내용, {letterRendering: 1,allowTaint: false,useCORS:true})
.then(캔버스 => {
const imgData = 캔버스.toDataURL('이미지/png');
console.log(imgData);
const pdf = 새로운 jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('다운로드.pdf');
});

출력 캔버스에는 이미지 대신 빈 상자만 있습니다. 누구든지 내 경우에 대한 해결책이 있습니까?

내 콘텐츠에는 Aws.s3()에서 가져온 이미지가 포함되어 있습니다. 위에서 언급한 댓글은 제 경우에는 작동하지 않습니다.

html2canvas(내용, {letterRendering: 1,allowTaint: false,useCORS:true})
.then(캔버스 => {
const imgData = 캔버스.toDataURL('이미지/png');
console.log(imgData);
const pdf = 새로운 jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('다운로드.pdf');
});

출력 캔버스에는 이미지 대신 빈 상자만 있습니다. 누구든지 내 경우에 대한 해결책이 있습니까?

여기에서 같은 문제. S3 버킷에서 오는 이미지

같은 문제....
내 이미지는 같은 출처에서 왔습니다.

방금 이 문제를 해결했습니다.
pls는 'useCORS' 옵션을 'true'로 설정합니다.
아래 코드:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

감사 해요
그것은 나를 위해 작동합니다 ❤❤

원본 ' http://localhost :3000'의 ' https://image/logo 링크'에 있는 이미지에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.
이것이 내 로고가 pdf 파일에 나타나지 않는 이유입니다.
CSS가 적용된 모든 텍스트와 정적 폴더에 있는 브랜드 로고가 옵니다.
이 문제에 대한 도움이 필요한 답변을 2주 이상 시도하고 있습니다.

여기 오는 사람은 여러 가지를 시도한 후 외부 리소스(예: S3 버킷)에서 이미지를 가져오려면 html2canvas에 대해 useCORS = true를 모두 활성화하고 S3에서 제공되는 이미지에 대해 CORS 정책을 활성화해야 한다는 것을 알게 되었습니다.

html2canvas 프록시를 사용하여 해결했습니다. 여기에서 사용 및 테스트에 대한 세부 정보를 볼 수 있습니다.
https://github.com/zeusstl/html2canvas-proxy-nodejs