Html2canvas: 배경 이미지 문제

0.4.1로 수정된 것으로 보입니다(개발 분기에서). 아마도 #256과 관련이 있을 것입니다.

0.4.1로 시도하고 문제가 여전히 존재하는지 확인할 수 있습니까?

안녕하세요. 나는 정확히 같은 문제가 있습니다. 예, 문제는 0.4.1에 여전히 존재합니다. 모든 도움에 감사드립니다.

동일한 문제가 발생했습니다... 아직 해결 방법이 없나요? 이 놀라운 스크립트에 대해 Niklas에게 감사드립니다.

이 코드는 렌더링되지 않습니다.
div class="mc-image " title="" style="background- image:url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ), 너비: 1025픽셀, 높이: 780픽셀, Z-색인: 9999"

background-size: cover를 제거하면 알아차렸습니다. 내 class="mc-image"에서 작동합니다.

@ymorin007 Mac과 Chrome/Opera/Safari를 사용 중이거나 최신 커밋을 사용 중입니까(예: 직접 스크립트 작성)?

Windows7 크롬 버전 30.0.1599.101m

임시 수정:

줄 2818을 다음으로 변경

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

이는 배경 크기의 두 가지 옵션인 포함 또는 덮개와 확실히 관련이 있습니다.

최신 커밋(html2canvas 0.4.1)이 수정되었습니다.

내 것은 최신 커밋 후에도 여전히 이것을하고 있습니다 ...

내 배경 크기는 '커버'로 설정되어 있고 '자동 100%'도 시도했지만 여전히 흰색/투명합니다.

background-size를 제거하면 잘 캡처됩니다... 더 많은 팁이 있습니까?

임시 수정, 사용:

b 배경 :URL ("...base64...")

그리고 사용하지 마세요

또한 html2canvas가 이를 이해하지 못하는 것 같기 때문에 "스프라이트"를 사용하지 마십시오.

url에 상위 디렉토리 배경에 대한 상대 경로가 포함된 경우 backgound 이미지에 문제가 있습니다. url("../i/alerts-16x.png")

다음과 같은 방식으로 png를 재배치하면 작동합니다. url("i/alerts-16x.png")

배경 이미지를 렌더링할 수 없고 배경 크기를 포함하거나 포함하는 것처럼 보이므로 0.4.1 버전에서 350행을 다음과 같이 변경했습니다.

topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);

그리고 그것은 작동합니다!

버전 0.4.1을 사용 중입니다.

배경에도 문제가 있습니다.

fperich가 제안한대로 라이브 350을 변경했지만 도움이되지 않았습니다.

또한 hernan이 권장하는 base64 배경 이미지도 기쁨이 없습니다.

변환하려는 URL은 다음과 같습니다.
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

여기에서 웹 페이지 렌더러를 사용하면 배경으로 변환됩니다.
http://html2canvas.hertzen.com/screenshots.html

그러나 내 페이지에는 배경이 없습니다. 여기에서 샘플 보기
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

내가 사용하는 코드는 이것입니다

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

기본적으로 페이지를 로드하고 이미지로 변환하도록 합니다.

내 코드에 문제가 있습니까?

감사 해요

fperich 유 록맨 !! 감사 해요

두 번째로, fperich, 당신은 지금 내가 가장 좋아하는 사람입니다!

fperich 감사합니다 :D 잘 작동했습니다

@shauchenka @niklasvh 이 문제가 해결 되었다고 말씀 하시겠습니까? 이 문제를 종료할 수/있어야 합니까?

0.4.1(최신 릴리스 및 개발자 모두)을 사용하면 최소한 Windows용 Chrome에서 내 자식 요소의 배경 이미지(자식은 스프라이트임)가 캔버스에 표시되지 않습니다. Windows용 Firefox는 잘 작동합니다. Mac용 Chrome에서는 배경 이미지가 있는 범위에 검은색 사각형이 표시됩니다. fperich 수정을 시도했지만 작동하지 않았습니다. 배경 이미지는 동일한 출처에 있고 모든 파일은 서버의 동일한 디렉토리에 있습니다.

@4gstudios 문제를 설명하기 위해 jsfiddle(또는 공개적으로 액세스할 수 있는 링크)에 간단한 예제를 넣을 수 있습니까?

@usmonster 확실합니다. 이미지가 외부에 있는 것을 원하지 않았기 때문에 jsfiddle을 사용하지 않았으므로 교차 출처 문제를 배제할 수 있습니다.

이제 무엇을 추측합니다. 이것을 준비하는 동안 문제가 내 스프라이트에 사용하려는 png에 있는 것 같다는 것을 깨달았습니다. 처음에는 파일 크기가 아닐까 생각했지만 실제로는 png 크기에 문제가 있는 것 같습니다.

더 복잡한 png가 상대적으로 작은 차원에서 문제를 나타내는 것처럼 보이기 때문에 png에 포함된 정보의 양과 관련이 있을 수 있습니다. 나는 tinypng.com을 통해 png 최적화를 약간 엉망으로 만들었기 때문에 반드시 파일 크기와 관련이 있다고 생각하지 않으며 더 작은 파일 크기의 더 큰 치수 이미지에는 문제가 있는 반면 더 큰 파일의 더 작은 치수 이미지에는 문제가 있습니다 사이즈는 안됩니다.

내 예를 확인하십시오: http://4gstudios.com/html2canvas/

파란색 상자가 잘 렌더링됩니다(bg 이미지는 100x7800픽셀/374kb).
빨간색 상자가 올바르게 렌더링되지 않음(bg 이미지는 100x25000픽셀/254kb)
-OS X 크롬(블랙박스)
-OS X Safari("아니오" 상자)
-그리고 아마도 Win Chrome(어제 발생했지만 PC ATM 근처에서는 발생하지 않음)
-OS X Firefox는 잘 작동하는 것 같습니다.

내가 문제라고 생각하는 것을 잘 설명하고 해결할 수 있기를 바랍니다. 내 프로젝트에서 사용하려는 스프라이트에는 800가지가 넘는 다양한 CSS 규칙이 있으며 변경하고 싶지 않습니다!

편집 : 내 예제는 0.4.1을 사용하지만 0.5.0rc1을 시도했을 때 동일한 문제가 발생했습니다.

테스트할 수 있는 OS X가 없지만 Windows(Vista)의 Chrome 37 및 Linux(Debian wheezy)의 Chrome 38 베타에서 제대로 작동하는 것 같습니다. 어떤 버전의 Chrome을 사용하고 있습니까? 모든 확장 기능을 끈 상태에서 시크릿 모드에서 테스트를 시도해 보셨습니까?

@usmonster 방금 Chrome 36(Win7)에서 시도한 다음 Chrome 37(Win7)로 업데이트했는데 여전히 문제가 있습니다.

@4gstudios 로깅을 켜면 브라우저 콘솔에서 무엇을 볼 수 있습니까?

또한 동일한 문제가 있더라도 현재 마스터 브랜치에 있는 것만 사용하도록 사이트의 예제를 업데이트하십시오. 디버깅에 큰 도움이 될 것입니다.

셋째, 모든 크롬 확장 프로그램을 비활성화 시켜도 이 문제가 나타나는지 확인 부탁드립니다. (그렇다면 이미지의 다운로드 및/또는 렌더링이 너무 느린 것처럼 타이밍 문제인지 궁금합니다.)

@usmonster

1) 로깅이 켜져 있습니다....
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 html2canvas.js:21

2) 마스터 브랜치 html2canvas.js로 업데이트

3) 네, 모두 장애인으로 시도했습니다. 타이밍이라면 다운로드 시기가 아닌 것 같지만 렌더링은 가능합니다.

@4gstudios 테스트할 다른 ​​컴퓨터가 있습니까? 또한 라이브 링크는 여전히 0.4.1을 사용하는 것처럼 보입니다.

@usmonster 오, 내 잘못, 내가

흠, 사용 가능한 컴퓨터 중 하나에서 여전히 문제를 재현할 수 없지만 동료는 Windows 7 컴퓨터에서 문제를 재현할 수 있습니다. @niklasvh , @brcontainer 아이디어가 있습니까? 플랫폼별 GPU 가속 합성/래스터화와 관련이 있는 것 같은데.. 이번 주 후반에 W7 컴퓨터에 액세스할 수 있으면 테스트를 해봐야 겠지만, 궁금합니다... @4gstudios , 두 번째 이미지를 절반으로 만들고 다시 테스트하면 어떻게 될까요? 버그가 사라질 때까지 계속 절반으로 줄이고 CSS 규칙을 조정하시겠습니까? 이 문제를 유발하는 PNG의 "흥미로운" 영역이 있는지 확인하고 싶습니다.

@usmonster Chrome이 설치된 Windows 7 x64에서 발생했습니다. DEBUG를 하려고 합니다.
windows7x64에서는 몇 가지 문제가 발생하는데 버전 32에서는 발생하지 않는데, 크롬의 버그인 것 같습니다.

나는 이것이 원본 이미지의 크기와 관련이 있다고 확신합니다. 큰 이미지나 큰 캔버스를 렌더링하는 데에는 다양한 결과가 있으며 내가 아는 한 이에 대한 지원을 감지하는 현명한 방법은 없습니다.

소스 이미지의 크기와 직접적인 관련은 없지만 다양한 결과를 통해 다음과 같은 큰 이미지 및 캔버스 문제에 대한 아이디어를 얻을 수 있습니다.

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15

다른 브라우저/OS/메모리 제한에 대해 최대 이미지 크기와 캔버스 크기에 대한 몇 가지 테스트를 설정해야 실제로 제한이 있는 위치와 제한을 어떻게든 우회할 수 있는지 여부(예: 렌더링을 더 작은 청크로 분할)를 보다 확실하게 이해해야 합니다. .

@4gstudios @brcontainer 문제를 재현할 수 있었던 장치에 메모리가 얼마나 있습니까?

@niklasvh

• 윈도우 7 홈 프리미엄 x64
• 인텔 코어 i5 CPU M450 2.40Ghz
• 4GB RAM

Windows 32비트에서 테스트(가능한 한) 하겠지만 문제는 Windows 64비트에서만 발생한다고 생각합니다.

내가 의심한대로 문제는 "Windows x64"에서만 발생하며 https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888, 즉 Windows 32비트에서는 작동하고 Windows 64비트에서는 실패합니다. , 하나의 가능한 버그 Chrome.

@brcontainer 문제는 OS X 10.7의 Chrome 및 Safari에서도 발생합니다...

또한 32비트 Windows 7 컴퓨터에서 테스트했으며 모든 것이 잘 작동합니다(버그 없음). 이것은 확실히 64비트 시스템만의 문제처럼 보입니다. 좋은 캐치, @brcontainer! 주목해야 할 또 다른 사항은 64비트 시스템을 위한 Chrome의 새 버전이 매우 최근에 출시되었다는 것입니다.

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64(Windows 다운로드 링크)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html(Mac 은 아직 베타 버전임)

이 문제가 발생한 사람들의 경우 아직 32비트 버전을 실행하고 있지 않습니까? 다운로드하려면 64비트 버전을 수동으로 다운로드해야 한다고 생각합니다. 이러한 문제를 해결할 가능성이 있습니다.

@usmonster 글쎄 내 Windows7은 64비트입니다. 이 버그는 Win7 64비트의 32비트 및 64비트 Chrome 모두에 영향을 줍니다. 일부 OSX 시스템에도 영향을 미치는 것 같습니다. 내 문제가 해결되지는 않지만 64비트 버전의 Chrome을 얻을 수 있는 링크에 감사드립니다.

이것은 "Windows 64bit"(또는 Mac OSX)와의 비호환성이 아니라 Chrome의 버그처럼 들립니다.

@brcontainer 64비트 Windows 및 Mac에서 Chrome 및 WebKit 브라우저에 문제가 있는 것처럼 보인다는 데 동의합니다(Linux가 아닌 .. 적어도 내 64비트 Debian 상자 w/ 8GB RAM에서는 아님). @4gstudios 는 32비트 Windows에서 버그를 볼 수 있습니까? 그리고 문제의 영향을 받는 컴퓨터에 얼마나 많은 RAM이 있습니까?

이 문제를 근본으로 줄일 수 있으면 좋을 것입니다. 두 번째 PNG에는 첫 번째 PNG보다 그라디언트와 훨씬 더 큰 치수가 있습니다. 테스트할 영향을 받는 시스템이 있는 경우 특정 문제 영역이나 문제를 일으키는 크기가 있는지 알 수 있을 때까지 "나쁜" PNG를 잘라냅니다. (아마도 @niklasvh에게도 관심이

@instiz @instiz

AppleWebkit(버전 538.1) 및 "Safari 5.1.7"(버전 534.57.2 - 이 브라우저는 더 이상 업데이트를 받지 않음)에서 Windows .then (발화/트리거 아님)가 수행되지 않습니다.

그래서 "Webkit"의 실패인지 "Blink"(Chrome의 Webkit 엔진 포크) 실패인지, 아니면 "RAM" 부족으로 인한 실패인지 테스트할 수 없었습니다.

@brcontainer @4gstudios 에 따르면 버그는 OS X의 Safari와 Chrome 모두에서 재현 가능했기 때문에 적어도 Blink와 WebKit 엔진 모두에 공통적인 버그라고 가정하는 것이 안전하다고 생각합니다.

@usmonster .then(...) 가 AppleWebkit(버전 538.1)에서 실행되지 않는다는 창을 테스트할 수 없습니다.

@usmonster 나는 내 예제를 만드는 동안 일종의

@usmonster , @brcontainer , @niklasvh , 문제에 대한 모든 도움에 감사드립니다

@niklasvh onrendered는 더 이상 사용되지 않습니다. 그래서 대신 무엇을 사용할 수 있습니까? 0.5.0-alpha1을 사용하고 있습니다.

또한 이미지가 동일한 도메인에 있어도 배경 이미지가 다운로드되지 않습니다.

html2canvas($("#foredownload 테이블"), {
로깅 : 사실,
렌더링: function(c) {
var myImage = c.toDataURL("이미지/jpeg");
$('#downloadableImage').prop('href', myImage);
}
});
도움을 주시면 감사하겠습니다. 감사 해요

@codegiant2 https://github.com/niklasvh/html2canvas#usage .

감사합니다 fperich 그것은 나를 위해 일했습니다 !!

@fperich
많이 도와주세요! 감사합니다!

나는 얼굴이 잘린 몸 배경 이미지였다
(작은 bounds.height from NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3 ) 내

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

해결 추가

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

이 멋진 코드 조각에 대해 niklasvh와 모든 기여자에게 감사드립니다!

나는 또한 같은 문제가 있습니다. 캔버스에 표시되지 않는 s3 이미지에서 로드하고 있지만 시스템에서 로컬로 로드 중입니다. 어떻게 해결할 수 있습니까?

나도 같은 문제가 있습니다.

배경 이미지를 로드하지 못했습니다. 오류 메시지가 나타납니다 . 배경 로드 중 오류:

여기에 jsFiddle

이 문제를 해결하도록 도와주세요.
감사 해요,

안녕하세요 @gopis 님 ,

corse 옵션을 사용하십시오.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

@fxmontigny.
여전히 테두리 이미지 로딩 문제가 존재합니다. 내 업데이트된 JSFiddle을 참조하십시오.
검은 색 테두리만 표시하는 테두리 이미지가 로드되지 않습니다.

나는 같은 문제에 직면하고 있습니다. 아래는 크롬 콘솔의 로그입니다.
html2canvas: 사전 로드 시작: 배경 이미지 찾기
html2canvas.js:21 html2canvas: 시작: 이미지: 1 / 1 (실패: 0)
html2canvas.js:21 html2canvas: 시작: 이미지: 2 / 2 (실패: 0)
html2canvas.js:21 html2canvas: 미리 로드: 이미지 찾기
html2canvas.js:21 html2canvas: 사전 로드: 완료.
html2canvas.js:21 html2canvas: 시작: 이미지: 2 / 2 (실패: 0)
html2canvas.js:21 이미지 로드 완료: # 2 (실패: 0)
html2canvas.js:21 html2canvas: 배경 로드 중 오류:
html2canvas.js:21 html2canvas: 렌더러: 캔버스 렌더러 완료 - 캔버스 obj 반환

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

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

누군가에게 도움이 될 수 있으니 댓글만 남겨주세요.
내 문제는 로컬에서 모든 것이 작동했지만 프로덕션에서는 CSS 배경 이미지를 렌더링하는 데 실패했다는 것입니다.
그 이유는 우리가 CloudFront를 사용하고 있었기 때문입니다. 즉, css 파일의 URL은 cloudfront 도메인의 자산을 참조하는 반면 JS는 별도의 도메인에서 실행됩니다.
그러나 html2canvas 로그는 그것이 cors 문제임을 나타내지 않았습니다.
'useCORS'는 프록시 URL 등이 필요하다고 생각하기 때문에 자체적으로 작동하지 않는 것 같습니다.

@jacobclarke 또한 html2canvas를 사용하여 로컬 S3 이미지의 캔버스에 배경 이미지를 캡처할 때 동일한 문제가 캡처되고 있지만 프로덕션에서는 배경 이미지를 캡처하지 않습니다. 내 html2canvas 버전은 v1.0.0입니다.