Html2canvas: 이미지 태그가 캡처되지 않음

자체적으로 비동기식인 이미지의 사전 로드가 누락되었으므로 이를 콜백으로 래핑해야 합니다. 아마도 이전 버전도 사용 중일 것이므로 https://github.com/niklasvh/html2canvas/downloads 에서 최신 버전을 얻은 다음 다음을 사용하여 테스트하는 것이 좋습니다.

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

빠른 응답에 감사드립니다. 최신 버전을 다운로드하고 위의 코드를 시도했지만 여전히 렌더링된 캔버스에 이미지 태그가 표시되지 않습니다. 내가 누락 된 것이 있습니까? html2canvas.js, jquery.plugin.html2canvas를 추가하고 jquery 1.7을 사용했습니다. 귀하의 도움에 감사드립니다.

이미지가 렌더링 중인 페이지 와 동일한 출처에서 호스팅됩니까?

logging: true 설정하고 콘솔이 이미지에 대해 말하는 내용을 확인합니다. 이미지가 실패합니까?

이미지가 완벽하게 로드되고 있습니다. 아래 로그를 참조하세요.

html2canvas: 사전 로드 시작: 배경 이미지 찾기 html2canvas.js:27
html2canvas: 시작: 이미지: 1 / 1 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 2 / 2 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 3 / 3 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 4 / 4 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 5 / 5 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 6 / 6 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 7 / 7 (실패: 0) html2canvas.js:27
html2canvas: 사전 로드: 이미지 찾기 html2canvas.js:27
html2canvas: 미리 로드: 완료. html2canvas.js:27
html2canvas: 시작: 이미지: 8 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 9 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 10 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 11 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 12 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 13 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 14 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 15 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 16 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 17 / 18 (실패: 0) html2canvas.js:27
html2canvas: 시작: 이미지: 18 / 18 (실패: 0) html2canvas.js:27
이미지 로드 완료: # 18 (실패: 0) html2canvas.js:27

캔버스가 원본 간 데이터로 오염되었기 때문에 캔버스에서 이미지 데이터를 가져올 수 없습니다.

html2canvas: 렌더러: 캔버스 렌더러 완료 - 캔버스 obj 반환

자바 스크립트 파일과 이미지는 이전 주석에 추가하여 동일한 디렉토리에 있습니다.

안녕하세요 niklasvh, 그것은 동일한 원래 정책 문제를 완벽하게 작동했습니다. 이전에 file://을 사용하여 로컬로 실행되었던 웹 서버에서 실행하는 것을 해결했습니다. 이것은 도메인 간 문제로 보입니다. 올바른 방향으로 인도해주셔서 감사합니다. 이것은 훌륭한 플러그인입니다 :)

Niklashvh 저는 file://을 사용하여 로컬로 실행되는 Android 하이브리드 앱에 대해 이 작업을 수행하려고 합니다.

이미지를 아무데도 내보낼 필요가 없으면 언제든지 allowTaint: true 설정할 수 있습니다.

이미지를 메모리로 내보내고 이메일로 pdf로 전송 중입니다.

동일한 문제가 있습니다. 로그는 다음과 같습니다.

html2canvas: 사전 로드 시작: html2canvas.js 배경 이미지 찾기: 21
html2canvas: 사전 로드: 이미지 찾기 html2canvas.js: 21
html2canvas: 미리 로드: 완료. html2canvas.js 21
html2canvas: 시작: 이미지: 1/2 (실패: 0) html2canvas.js: 21
html2canvas: 시작: 이미지: 2/2 (실패: 0) html2canvas.js: 21
이미지 로드 완료: # 2 (실패: 0) html2canvas.js: 21
html2canvas: 렌더러: 캔버스 렌더러 완료 - obj 캔버스 반환

이미지는 배경 이미지에 있으며 기본 이미지 div를 로드하기만 하면 수감자가 표시되지 않습니다.

이미지 교차가 동일한 도메인에 있으므로 문제가 되지 않습니다.

어떤 아이디어라도?

"background-size: cover;"를 추가하면 스타일에 이미지가 나타나지 않습니다 ...

분명히 이것이 문제입니다

작동했습니다!! "background-size: 100% 100%;"만 입력하면 됩니다. "background-size: cover;" 대신

img와 함께 온라인 URL을 사용할 때 HTML@Canvas 가 캡처되지 않습니다. 이 문제에 대한 해결책은 무엇입니까?
감사 해요

@Elgamal10 프록시 사용

https://github.com/brcontainer/html2canvas-php-proxy(php가 있는 html2canvas 프록시)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy(asp-classic이 있는 html2canvas 프록시 - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy(asp.net이 있는 html2canvas 프록시 - csharp)

참고: README.md 파일 읽기

답장을 보내주셔서 감사합니다. 화면 촬영은 잘 되지만 다음과 같은 오류가 있습니다.

html2canvas_5가 정의되지 않았습니다
html2canvas_0이 정의되지 않았습니다
html2canvas_5가 정의되지 않았습니다.
html2canvas_4가 정의되지 않았습니다.
html2canvas_1이 정의되지 않았습니다
html2canvas_5가 정의되지 않았습니다.

@Elgamal10 프로젝트에서 이슈 생성
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

나는 당신이 C#(ASP.NET)을 사용한다고 생각합니다. 맞습니까?

안녕하세요 니클라스 ,

나는 당신의 API를 사용하기 시작했고 훌륭합니다. 하지만 막혔습니다. 도와주세요.

코드를 사용하여 html을 캔버스로 변환하려고 합니다.
jQuery('html').html2canvas({
프록시:" http://localhost/myproject/proxy.jsp ",
userCORS:참 ,
렌더링: 함수(캔버스) {
경고(캔버스);
var url = 캔버스.toDataURL("이미지/png");
window.open(url, '_blank');
},
});

이제 ~/tomcat/myproject/images/ 경로에 모든 교차 원본 이미지를 저장하는 proxy.jsp라는 파일이 있습니다."

그 후 나는 콘솔에서 이것을 봅니다.
리소스가 스크립트로 해석되지만 MIME 유형 image/jpeg로 전송됨: " http://localhost/myproject/proxy.jsp?url=http%3A%2F%2Fi.ebayi …QYEAAMXQVERSuVtL%2F%24_1.JPG%3Fset_id%3D8800004005&callback= html2canvas_64". html2canvas.js:2264

이 모든 후에 내 콜백 기능이 실행되지 않고 캔버스를 만들 수 없습니다..

무엇을 할 수 있습니까? 도와주시겠어요?

많은 감사

@himakshi89 proxy: 와 userCORS: 를 동시에 사용할 수 없습니다.

프록시 사용을 선호합니다.
참고: 시체를 캡처하십시오.

코드에 쉼표가 남아 있습니다.

},//this is wrong.

});

html2canvas의 버전은 무엇입니까?

이 시도:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

작동하지 않으면 https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js 에서 html2canvas를 다운로드하고 다음 코드를 사용

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
안녕하세요

내 코드를 수정했으며 이제 proxy.jsp에서 다음과 같이 응답을 보내고 있습니다.
({"html2canvas_67":http://localhost/myproject/0.1651487380333363.jpg"})

이제 콘솔에 오류가 표시되지 않습니다.
하지만 지금은 아무 일도 일어나지 않습니다. 무슨 일이 일어나야 합니까, 아니면 바꿔야 할 곳이 있습니까?

도와주세요

그러나 콘솔은 아무것도 보여줄 수 없기 때문에
두 번째 샘플 코드를 사용했습니까? 콘솔에 로그를 보냅니다.

코드를 온라인으로 테스트할 수 있는 방법을 제공하십시오.

제안한대로 useCORS를 제거하고 html을 본문으로 바꿉니다.

jQuery('바디').html2canvas({
프록시:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
로깅:true ,
렌더링: 함수(캔버스) {
var url = 캔버스.toDataURL("이미지/png");
window.open(url, '_blank');
}
});

나는 또한 이것이 내 콘솔임을 받고 있습니다.
html2canvas: 로드 오류 : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js:21

내가 얻는 것의 스크린 샷을 첨부했습니다.

https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js 다운로드를 시도했습니다.

그리고 이 코드:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

아니면?

참고: http://nisquare.dyndns.org:8087/facebook/proxy.jsp 가 깨졌습니다!

나는 최신 버전을 다운로드했다

나는 다음과 같이 코드를 대체

html2canvas($("바디").get(0), {
프록시:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
로깅:true ,
렌더링: 함수(캔버스) {
var url = 캔버스.toDataURL("이미지/png");
window.open(url, '_blank');
}
});

링크 테스트를 보내주세요

나는 이것을 크롬 확장 프로그램으로 사용하고 있으며 확장 프로그램은 아직 개발 모드에 있습니다.

JSP를 사용한 "크롬 확장"?

jsp는 프록시 부분에만 사용됩니다. 더 바람직한 것은 무엇입니까?

Chrome 확장 프로그램은 다른 "프로토콜" 및 "프레임"에서 실행되며, proxy.jsp는 HTTP 프로토콜을 사용합니다.

크롬 확장에는 프록시가 필요하지 않다고 생각합니다. 다음과 같이 사용하십시오.

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

읽기: http://developer.chrome.com/extensions/tut_debugging.html

@brcontainer
아이디어 주셔서 감사합니다. 이제 크롬 자체에서 제공하는 API를 사용하고 있습니다. 그것은 매우 쉽게 또는 문제를 해결하는 기능 chrome capturevisibletab이 있습니다 :)

@jgab-net 정말 감사합니다. 오류에 대해 너무 오래 검색했습니다.

@ Sumit8 (Y) 천만에요

@gitbala 문제가 해결되었습니까? @niklasvh 이 문제를 해결할 수 있습니까? (이게 귀찮다면 버그 분류로 그만하겠습니다.. :)

@usmonster 는 계속해서 모든 미해결 문제를 살펴보는 데 시간을 절약할 수 있습니다. :)

네 해결되었습니다 :)

2014년 9월 1일 월요일 오전 4시 11분에 usmonster [email protected]에서 다음과 같이 썼습니다.

@gitbala https://github.com/gitbala 문제가 해결되었습니까? @niklasvh
https://github.com/niklasvh 이 문제를 해결할 수 있습니까? (나는 그만하겠다.
버그 분류는 이게 짜증나네요.. :)

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

html2canvas를 사용하고 있습니다. 로컬 이미지가 pdf로 렌더링되지 않습니다. 이에 대한 해결책은 무엇입니까?

@niklasvh pls help - html의 로고 이미지가 pdf로 렌더링되지 않습니다.

인라인 image.how to use "proxy": " http://localhost/myproject/proxy.jsp "를 변환할 때 실패했습니다. 저는 vue를 사용합니다. 이 jsp를 어디에 넣을지 모르겠습니다. @niklasvh 를 사용하는 방법을 알 수 없습니다. 돕다?

@qiuyaofan 같은 문제가 발생하여 솔루션을 얻었습니까? angular2와 함께 사용하고 다른 서버에서 이미지를 가져옵니다. @gitbala 솔루션을 얻었습니까?

+1 BTW 로그는 좋아 보이지만( html2canvas: Images loaded, starting parsing ) 여전히 pdf에 이미지가 표시되지 않습니다.

사용 중

allowTaint: 사실,
useCORS: 사실,
taintTest: 거짓,

@NikhilRadadiya @qiuyaofan 여러분, 또한 정당한 클라이언트 측 솔루션을 찾고 있었습니다. vue js를 사용하고 giphy에서 이미지를 가져옵니다. 그래서 여기 저에게 잘 맞는 것이 있습니다.

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

따라서 프록시가 사용되지 않았습니다.

@creepteed 캔버스로 변환한 다음 pdf로 저장해야 하는 다른 요소가 있습니다. 내 html에는 이미지만 포함되어 있지 않습니다. 이 경우 게시한 위의 기능을 어떻게 사용할 수 있습니까?

안녕하세요 @niklasvh 님 ,
htmltocanvas를 사용하여 웹 페이지를 캡처하고 싶습니다. 모두 제대로 작동하지만 웹 페이지를 캡처하려고 할 때 이미지가 표시되지 않습니다.
도와주세요?
내 코드는 다음과 같습니다.
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

콘솔에서 나는 이것을 얻는다.
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
감사 해요.