Html2canvas: toDataURL을 통해 생성된 이미지의 해상도를 높이는 방법

다른 문제/요청의 어느 시점에서 이에 대한 이야기가 있었고 누군가가 pull 요청을 제출했다는 것을 알고 있지만 pull 요청이 병합되는 것을 본 적이 없습니다.

장치 픽셀 밀도를 확인하는 데 사용하는 작업 방법이 있습니다. 그러나 이것은 성능에 영향을 줄 수 있습니다. 대신 더 높은 dpi로 렌더링하도록 매개변수가 필요할까요?

@missing 예, DPI를 지정하는 매개 변수는 굉장합니다.

또한 장치 픽셀 밀도에 대한 작업 방법을 공유하는 데 신경 쓰지 않는다면 괜찮을 것입니다. 내 주요 응용 프로그램은 최대 50개 단어의 단어 구름의 png를 내보내는 것입니다. 그래서 나는 이것에 대한 성능 히트에 대해 그다지 걱정하지 않습니다.

이미지의 품질이 문제입니까 아니면 흐릿한 효과입니까(일부 이미지는 html2canvas에 의해 흐릿한 효과로 생성됨)?

@brcontainer 이미지의 품질이 문제라고 생각합니다. 제 생각에는. 예: 100% 확대/축소에서 사진은 괜찮게 보입니다. 그러나 5%만 확대해도 사진 품질이 눈에 띄게 떨어지는 것을 볼 수 있습니다. 첨부된 이미지를 참조하세요.

런타임에 문제의 예를 보는 것만으로 확신할 수 있습니다.

http://jsfiddle.net/ 을 사용하여 같은 장소를 시도하고 여기에 링크를 게시하십시오.

[편집하다]
html2canvas에 의해 생성된 캔버스에 적용 _zoom_을 시도할 가능성이 있는 경우 (이미지로 저장하기 전에) 다음을 사용해 볼 수 있습니다.

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

행운을 빕니다

안녕하세요,

96DPI보다 높은 해상도가 필요합니다. 300DPI 이상이 필요합니다.

이것이 html2canvas와 _가능_합니까?

이미지의 흐릿함과 동일한 문제가 있습니다. 흐릿함을 제거하고 보기 좋은 DPI를 제공하는 솔루션이 필요합니다.

이 작업을 수행할 수 있는 방법 또는 동일한 효과를 얻을 수 있는 다른 방법에 대한 생각/제안이 있습니까?

감사 해요

@brcontainer 지금 편집했습니다. 나는 당신이 제안한 것을했지만 여전히 이미지 품질에 운이 없습니다. 여기 내가 한 일이 있습니다 -

                var ctx = canvas.getContext('2d');

                ctx.webkitImageSmoothingEnabled = false;
                ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;

                var rawData = canvas.toDataURL("image/png");

순서가 잘못된 경우 이미지 크기를 조정하기 전에 "ImageSmoothingEnabled"를 적용해야 합니다.

코드 샘플을 http://jsfiddle.net에 넣으면 편집해 보겠습니다.

안녕하세요 여러분,

toDataURL의 96dpi 제약 없이 고해상도 이미지를 업로드하고 싶습니다. toDataURLHD는 아직 사용할 수 없기 때문에 어떻게 내 꿈을 실현할 수 있습니까? :-)

어떤 힌트라도 미리 감사드립니다

@brcontainer 이미지 크기를 전혀 조정하지 않기 때문에 크기 조정 전에 스무딩을 적용한다는 것이 무슨 뜻인지 잘 모르겠습니다. 어쨌든 나는 당신이 http://jsfiddle.net/tankchintan/92mra/4/ 를 볼 수 있도록 jsfiddle을 만들었습니다.

이 문제가 해결되기를 정말 기대합니다! :)

당신이 혼란스러워하는 친구, 크기를 조정해야 하는 toDataURL 이 있습니다. CANVAS 크기를 조정해야 합니다.
예제를 만들려고 하지만 여전히 작동하지 않습니다.

안녕하세요,

나는 더 나은 이미지 품질을 위해 이러한 제안을 따르려고 노력했지만 나에게도 명확하지 않습니다.

brcontainer, 당신이 말하는 아이디어로 tankchintan이 만든 JS 바이올린을 명확히 하거나 변경/생성할 수 있습니까? 2배 크기의 이미지를 생성하더라도 이미지를 192DPI로 변환한 후에도 이미지의 픽셀화가 여전히 남아 있습니다.

안녕하세요 여러분, 이 문제에 대한 피드백이 더 있습니까? 품질/해상도를 높이기 위해 zoomFactor 설정할 수 있는 PhantomJS와 비교하여 html2canvas로 매우 프로 이미지 품질을 경험하고 있습니다.

비슷한 문제가 있습니다. html2canvas를 사용하여 div를 이미지로 변환한 다음 iTextsharp를 사용하여 PDF에 이미지를 추가하는 PDF 문서로 웹 페이지의 스냅샷을 가져와야 한다는 요구 사항이 있습니다. 그러나 생성된 이미지가 약간 흐릿하게 보이며 눈으로 지속적으로 보기가 어렵습니다. html2canvas에서 생성 시 자체적으로 지정된 해상도의 이미지를 생성할 수 있는지 알고 싶습니다.

안녕하세요,
나는 위와 똑같은 요구 사항을 가지고 있습니다. 그리고 같은 문제가 직면하고 있습니다.
"내 div를 이미지로 변환한 다음 이미지를 PDF에 추가하기 위해 html2canvas를 사용하는 PDF 문서로 웹 페이지의 스냅샷 가져오기."
그러나 생성된 이미지가 약간 흐릿하게 보입니다.

위의 제안을 따랐지만 여전히 흐릿한 이미지가 나타납니다.
여기 내 코드에서: html2canvas는 시스템 해상도를 기반으로 하는 웹 페이지의 스냅샷을 생성합니다.
시스템 해상도에 따라 다른 크기의 동일한 웹 페이지 "스냅샷"이 표시됩니다.

예시 :
이미지 크기 : 816x422
이미지 크기 : 1193x437
이미지 크기 : 1275x437
여기서 내 기대치는 2000 x 1784 치수 이상입니다.

이 차원의 이미지를 얻을 수 있습니까?
소중한 제안을 해주시고 소중한 시간 내주셔서 감사합니다.

이것에 대해 +1. PDF에 삽입할 html2canvas를 사용하여 이미지를 얻으려고 하지만 품질이 흐릿합니다.

더 높은 해상도로 내보내려는 요소에 대해 parentNode의 CSS 변환 매트릭스를 사용해 보셨습니까? 이것은 나를 위해 작동합니다. 예: "변환: scale(2, 2)"

@mudcube 는 부분적으로 나를 위해 일했습니다.

@brcontainer 그것은 나를 위해 잘 작동합니다

해결책이 있습니까?? 흐릿한 이미지의 해상도를 높이는 방법을 공유하십시오. 나는 그것의 pdf를 만들어야 합니다.

+1 이에 대한 솔루션/지침이 아직 있습니까?

어떤 해결책을 찾았습니까?

여러분, transform: scale(2, 2) 하면 잘 됩니다.

자세한 내용을 제공할 수 있습니까?

@matiasinsaurralde 스크린샷을 만들기 직전에 위에서 css 규칙이 포함된 css 클래스 .x2 를 요소에 추가한 다음 html2canvas 콜백에서 해당 클래스를 제거합니다. 두 배 크기의 요소와 두 배 크기의 스크린샷도 얻을 수 있습니다. 그리고 그것은 매끄럽기 때문에 크기 조정을 관찰하지 않을 것입니다.

@Ajaxy 제안을 따르려고 할 때의 스크린샷. 내 코드에 문제가 있다고 생각합니까? 페이지를 렌더링하는 데 너무 오래 걸렸습니다.

스케일은 나를 위해 해상도를 증가시키지 않았습니다. JS로 해결해야했습니다 -
https://github.com/niklasvh/html2canvas/issues/379

행운을 빕니다 여러분?

transform: scale(2, 2); 는 dygraph.js에 대한 솔루션도 아닙니다.

@premerddyn , 연결된 문제에서 내 솔루션을 참조하십시오.
잘 작동하지만 스크린샷 전에 확대해야 합니다.
내 의견이 명확하지 않으면 더 많은 설명을 추가하겠습니다.

글쎄, 내가 한 일은 두 배 크기의 div를 만들고 가시성을 축소하고 여기에 있는 모든 콘텐츠를 해당 div에 게시하고 스크린샷을 찍은 것입니다. 그런 식으로 이미지 선명도가 손실되지 않고 글꼴 크기 코드를 수정하여 만들었습니다. 작동합니다.잘 작동합니다.하지만 내 문제는 텍스트 스트로크 및 여러 줄 텍스트 배경에 있습니다.

2로 스케일링하면 효과가 있지만 렌더링이 창 해상도/크기에 의해 제한된다는 것을 알았습니다. 크기가 조정된 div가 창보다 넓으면 일부가 잘립니다.

그래서 화면보다 큰 캔버스를 캡쳐하는 방법은 없나요?

아, 이 스레드에서:

var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    html2canvas($(element)).then(function(canvas) {
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        //Do whatever you want with your canvas
    }

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

이 예에서 고해상도를 달성하려고했지만 얻지 못했습니다 ...

pngx2 다운로드 버튼을 클릭하세요..

버튼을 클릭하면 캔버스가 두 배 크기로 바뀌고 사진이 캡처되고 다시 캔버스가 일반 크기로 돌아오는 것과 같은 백엔드에서 작업을 수행할 수 있습니까?

물론 그렇게 할 수 있습니다. 나는 내가 원하는 크기의 캔버스를 사용하여
코드 제공. 값을 구하는 것이 부정확할 수 있다는 것을 알았으므로
너비/높이를 직접 설정합니다.

2016년 5월 7일 토요일에 enjoytheday [email protected] 은 다음과 같이 썼습니다.

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

이 예에서 고해상도를 달성하려고 시도했지만 얻지 못했습니다.
저것...

pngx2 다운로드 버튼을 클릭하세요..

버튼을 클릭할 때와 같이 백엔드에서 작업을 수행할 수 있습니까?
캔버스가 두 배 크기로 바뀌고 사진이 캡처되고 다시
캔버스를 다시 일반 크기로 가져옵니다..

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/241#issuecomment -217634634

세계에서 가장 오래 지속되는 일러스트레이션
ForeverScape.com http://www.foreverscape.com/ | @foreverscape
https://twitter.com/foreverscape | Github에서
https://github.com/vance/foreverscapecore | 뉴스에서
http://www.foreverscape.com/art/reviews/

@vance jsfiddle 예제에서 이것을 설정할 수 있습니까?

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

시도했지만 내가 설정하지 않았습니다.

완전히 편집하거나 새로 만들 수 있습니다.

많은 사람들에게 도움이 될 것입니다 :댄서:

재빨리 조롱하려고 했지만 테스트 div를 고칠 시간이 없었습니다. div의 내부 높이가 영향을 받지 _NOT_ 때문에 transform:scale() 무언가를 캡처하는 것은 아무 일도 하지 않습니다. 그렇기 때문에 변형입니다. w/h 속성은 (내부적으로) 변경되지 않았으며 getBoundingClientRect() 을 가져와 테스트할 수 있습니다. 부모의 컨텍스트에서 볼 때 너비/높이만 _actually_ 변경됩니다. 크기가 조정된 후 컨테이너 div를 가져와야 합니다.

https://jsfiddle.net/jano9ao4/1/

동일한 문제에 직면해 있습니다. 실행 가능한 솔루션이 있습니까?ヾ(´･ ･｀｡)ノ"

창보다 큰 요소를 캡처하기 위해 작동하도록 할 수 있었습니다. 변환된 요소에서 단순히 "더 큰" 이미지를 얻을 수 없다는 것을 기억하십시오. 왜냐하면 (자체적으로) 여전히 동일한 치수를 갖기 때문입니다.

iframe에서 작업을 수행하고 base64 데이터를 메시지로 다시 보내야 했습니다. 왜냐하면 다음을 수행하면 창 크기 조정 이벤트가 중단되기 때문입니다.

다시 댓글로:

   //store the original size
    var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    var w = $(element)[0].ownerDocument.defaultView.innerWidth;

   //set the document to the element's size
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    $(element)[0].ownerDocument.defaultView.innerWidth = $(element).width();

    html2canvas($(element)).then(function(canvas) {
        //restore the document size
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        $(element)[0].ownerDocument.defaultView.innerWidth = w;
        //Do whatever you want with your canvas
    }

html2canvas를 사용하여 HTML 요소에서 더 높은 DPI 스크린샷을 쉽게 얻기 위해 다음 함수를 작성했습니다.

• 높이 또는 너비가 제한된 경우(예: 고정된 본문 너비가 있는 경우) 처리 중에 제약을 제거해야 합니다. 소스 요소는 원하는 크기까지 성장할 수 있어야 합니다.
• srcEl 는 기존 요소여야 합니다.
• destIMG 는 기존(빈) 이미지 요소여야 합니다.
• dpi 는 96의 배수여야 합니다.

var makeHighResScreenshot = function(srcEl, destIMG, dpi) {
    var scaleFactor = Math.floor(dpi / 96);
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Save original document size
    var originalBodyWidth = document.body.offsetWidth;
    var originalBodyHeight = document.body.offsetHeight;

    // Add style: transform: scale() to srcEl
    srcEl.style.transform = "scale(" + scaleFactor + ", " + scaleFactor + ")";
    srcEl.style.transformOrigin = "left top";

    // create wrapper for srcEl to add hardcoded height/width
    var srcElWrapper = document.createElement('div');
    srcElWrapper.id = srcEl.id + '-wrapper';
    srcElWrapper.style.height = originalHeight*scaleFactor + 'px';
    srcElWrapper.style.width = originalWidth*scaleFactor + 'px';
    // insert wrapper before srcEl in the DOM tree
    srcEl.parentNode.insertBefore(srcElWrapper, srcEl);
    // move srcEl into wrapper
    srcElWrapper.appendChild(srcEl);

    // Temporarily remove height/width constraints as necessary
    document.body.style.width = originalBodyWidth*scaleFactor +"px";
    document.body.style.height = originalBodyHeight*scaleFactor +"px";

    window.scrollTo(0, 0); // html2canvas breaks when we're not at the top of the doc, see html2canvas#820
    html2canvas(srcElWrapper, {
        onrendered: function(canvas) {
            destIMG.src = canvas.toDataURL("image/png");
            srcElWrapper.style.display = "none";
            // Reset height/width constraints
            document.body.style.width = originalBodyWidth + "px";
            document.body.style.height = originalBodyHeight + "px";
        }
    });
};

용법:

var src = document.getElementById("screenshot-source");
var img = document.getElementById("screenshot-img");
makeHighResScreenshot(src, img, 192); // DPI of 192 is 4x resolution (2x normal DPI for both width and height)

이렇게 하면 window.onresize 이벤트 핸들러도 중단된다는 사실을 알았습니까? 이러한 이유로 iframe 내에서 이 모든 작업을 수행하고 내용을 반환하기 위해 parent.window.postMessage(data)를 사용하여 결과를 다시 게시해야 했습니다. 이것은 모바일 앱이기 때문에 나에게만 중요하며 onsize fire를 갖는 것이 중요합니다.

@vance : 제 경우에는 그런 것들이 필요하거나 사용하지 않습니다. 실제로 HTML-to-PDF 렌더러의 버그를 해결하기 위해 이것을 사용하고 있습니다. 귀하의 방법에 대한 전체 예를 보고 싶습니다. 더 유연해 보입니다.

몸의 크기를 조정할 필요가 없는 고해상도 이미지를 얻는 다른 방법을 찾았습니다. 그러나 html2canvas의 버그(#790, #820, #893, #922 등)로 인해 소스 요소의 위치를 ​​절대적으로 지정해야 합니다. @MisterLamb 의 레티나 코드를 기반으로

function takeHighResScreenshot(srcEl, destIMG, scaleFactor) {
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Force px size (no %, EMs, etc)
    srcEl.style.width = originalWidth + "px";
    srcEl.style.height = originalHeight + "px";

    // Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
    // See html2canvas issues #790, #820, #893, #922
    srcEl.style.position = "absolute";
    srcEl.style.top = "0";
    srcEl.style.left = "0";

    // Create scaled canvas
    var scaledCanvas = document.createElement("canvas");
    scaledCanvas.width = originalWidth * scaleFactor;
    scaledCanvas.height = originalHeight * scaleFactor;
    scaledCanvas.style.width = originalWidth + "px";
    scaledCanvas.style.height = originalHeight + "px";
    var scaledContext = scaledCanvas.getContext("2d");
    scaledContext.scale(scaleFactor, scaleFactor);

    html2canvas(srcEl, { canvas: scaledCanvas })
    .then(function(canvas) {
        destIMG.src = canvas.toDataURL("image/png");
        srcEl.style.display = "none";
    });
};

용법:

var src = document.getElementById("screenshot-src");
var img = document.getElementById("screenshot-img");
takeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI

편집: 제안에 대한 @jason-o-matic 덕분에 실제로 요소를 이동하고 여백을 조정하는 대신 절대 위치를 사용하여 해킹을 줄였습니다.

이것은 최신 버전(0.5.0-alpha)에서 작동합니다. 하지만 0.4.1이 아닙니다.

0.4.1에서 이 문제를 해결하려면 캔버스 크기를 가지고 놀아야 합니다.

@airdrummingfool 의 수정 사항(훌륭하게 작동함)을 사용하는 사람을 위한 간단한 메모...

xtree가 얼마나 멀리 있는지에 상관없이 스크린 덤프하려는 요소를 래핑하는 "상대적" 요소를 가질 수 없습니다. 화면 덤프 기간 동안 정적으로 전환해야 원하는 요소가 실제로 주변 DIV가 아닌 창을 기준으로 0,0에 나타납니다.

이 문제를 해결하는 데 몇 시간이 걸렸으므로 이것이 누군가가 같은 문제를 피하는 데 도움이 되기를 바랍니다.

좋은 오후입니다 여러분,
아무도 @airdrummingfool 솔루션의 jsfiddle을 가지고 있습니까? 운이 없으면 내 프로젝트에서 구현하려고합니다. 실제 예제는 이것이 어떻게 작동하는지 이해하는 데 큰 도움이 될 것이며 내 프로젝트에서 이를 구현하는 데 큰 도움이 될 것입니다.

제공할 수 있는 모든 지원에 대해 대단히 감사합니다.

안녕하세요 여러분! @airdrummingfool 솔루션을 사용하려고합니다. 하지만 짜증나는 오류가 하나 발생합니다. 이미지를 가져오려는 요소 내부에는 요소와 절차를 수행할 때 img 요소는 공백이 되고 src는 무시됩니다. 이 문제를 어떻게 해결할 수 있는지 아십니까? 누구든지 html2canvas에서 이 문제에 직면한 적이 있습니까?

이 스레드에 미리 감사드립니다! 날 구하고 있어!! :NS

편집: 또한 렌더링된 이미지의 절반만 얻고 있습니다. 하지만 해상도는 완벽해 보입니다 xD

이미지문제 수정!! useCORS가 활성화되지 않았습니다! 하지만 여전히 렌더링된 이미지의 절반만 받고 있습니다.

엄청난! 절반 이미지는 캔버스 외 렌더링 문제 로 인한 것일 수 있습니다. 또한 html2canvas에 해상도/크기 조정 을 @airdrummingfool 솔루션보다 사용하기가 더 쉽습니다.

그것들이 html2canvas에 병합될 때까지 여기에서 이 두 가지와 몇 가지 다른 버그 수정으로 내 사용자 정의 빌드를 얻을 수 있습니다 .

안녕하세요 @eKoopmans입니다. 답변해 주셔서 감사합니다. 방금 높이에 2를 곱하여 문제를 해결했습니다. 하지만 위와 아래에 공백이 있는 더 큰 이미지를 얻은 것 같습니다... 그래서... 귀하의 이미지를 시도하고 몇 분 후에 다시 보고하겠습니다. !

OM(F)G @eKoopmans .. 당신의 것은 즉시 작동합니다. 고마워요. 그 풀 리퀘스트... 지금 수락해야 합니다. html2canvas에 이 dpi 옵션을 원하는 사람들이 많이 있습니다.

#1087 찬성으로 마감

@airdrummingfool ... 감사합니다. 완벽하게 작동합니다.

https://github.com/cburgmer/rasterizeHTML.js 를 사용할 수 있습니다.

최신 버전의 html2canvas는 크기 조정 옵션을 제공합니다. 정말 잘 작동합니다.

html2canvas(요소, {
규모: 2
});

html 및 이미지 콘텐츠에서 여러 페이지 pdf 렌더링의 경우 scale: 1 설정하면 해상도 문제가 해결되고 동시에 이미지가 pdf 테두리를 초과하는 것을 방지할 수 있습니다.

나는 이것이 도움이된다고 생각합니다. 나는 html2canvas를 사용했습니다.

다운로드pdf() {
var 문서 = 새로운 jsPDF({
형식: "a4"
});

html2canvas(document.getElementById("pdf-doc"), {
규모: "5"
}).then(캔버스 => {
this.imgFile = 캔버스;
doc.addImage(this.imgFile, "JPEG", 5, 5, 200, 285);
doc.save("파일명" + ".pdf");
});
}