Html2canvas: 레티 나 디스플레이에서 캔버스 렌더링이 흐릿함

이 라이브러리는 훌륭하지만 그것을 경험합니다. # 379, # 373, # 340, # 203, # 312, # 158, # 390에서 언급 한 것과 같은 문제라고 생각합니다.

이것에 대한 업데이트가 있습니까?

https://github.com/niklasvh/html2canvas/pull/127 흐릿한 부분 수정

고정되지 않음

: +1 :

+1 수정 해주세요

+1 scalling 및 zooming CSS 스타일이 제대로 작동하지 않습니까? 스크린 샷을 찍는 html을 확대 / 축소하여 해결할 수 있으며 더 선명하게 보일 것입니다.

+1 수정 해주세요

+1 수정

안녕하세요.
형님,이 구성을 시도해보세요. 100 % 해결이 아니라 품질이 향상됩니다.

html2canvas (document.getElementById ( 'flag'), {
useCORS : true,
allowTaint : true,
letterRendering : true,
onrendered : function (canvas) {
var ctx = canvas.getContext ( '2d');
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = 거짓;
},
});

@breim
Bro ， 3Q가 도움을 청합니다.하지만 그다지 명확하지 않은 것 같습니다. 레티 나 장치의 렌더링 문제

고쳐주세요!

+1 수정 해주세요

Plz는 그것을 고쳐, Orz

+1

분명히 기존 캔버스를 렌더링에 사용할 수 있습니다 (레티 나에 표시되도록 미리 구성 할 수 있음).

예:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

@MisterLamb 귀하의 솔루션은 훌륭하게 작동합니다.

나는 또한 이것을 수정하고 싶습니다

+1

+1 수정

@MisterLamb 나는 귀하의 솔루션을 시도하고 있지만 작동하지 않는 것 같습니다. 나는 아무것도하지 않는 것 같은 수정 으로이 바이올린 을 만들었습니다. 내가 뭘 잘못하고 있는지 아십니까? 바이올린의 버튼을 클릭하고 여러 파일을 다운로드하여 테스트하고이 구현에서 동일한 지 확인할 수 있습니다.

@MisterLamb 아 방금 0.5.0-alpha1로 변경되었으며 더 잘 작동 합니다. 감사합니다. 업데이트

+1

@MisterLamb et al, 오늘 방금 시도

편집 : 아마 내 버그, 변경된 바이올린 은 괜찮습니다.

편집 2 : 범위를 좁힐 수 없었고, 이와 같이 다시 구현했으며 이제는 약간의 오프셋이 있지만 보이는 것이 있습니다. 아마도 h2c가 완전히 지원하지 않는 스타일이 있고 결과가 엉망입니다.

편집 3 : 예, 오프셋을 제거하기 위해 document.body로 이동해야했습니다.

@MisterLamb 당신은 진정한 천재입니다. 공유해 주셔서 감사합니다 ... 내 하루를 구했습니다.

@MisterLamb 당신은 최고입니다 👍

@makc 나도! 빈 캔버스 가져 오기-자체 캔버스를 사용하지 않는 경우 올바르게 렌더링됩니다.

참고로- @eKoopmans 솔루션은 지금까지 테스트에서 잘 작동합니다 : https://github.com/niklasvh/html2canvas/pull/1087 .. 현재 실행 중

# 1087에 찬성하여 마감

@MisterLamb 그러나 이미지의 해상도를 향상시키는 방법 ??
이 이미지를 저장하려고 할 때 96dpi로 저장하면 300dpi 이미지가 필요합니다. 내가 어떻게 할 수 있니 ??

@ shivtumca12 최신 릴리스 인 v1.0.0-alpha.1 에서는 scale 옵션을 사용하여 해상도를 높일 수 있습니다 ( scale: 2 는 기본 96dpi에서 해상도를 두 배로 늘림).

// html2canvas를 호출하기 전에 90 % 확대 한 다음 다시 100 %로 확대합니다.

document.body.style.zoom = '99 % ';
html2canvas (document.querySelector ( "# content"), {allowTaint : false, widht : _width, height : _height}). then (function (canvas) {

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

@MisterLamb 위의 솔루션은 html 페이지의 텍스트에 대해 작동합니다. 텍스트를 표시하는 동안 이미지의 텍스트를 훌륭하게 변환합니다. 그러나 html 페이지의 이미지 내용 (이미지)은 여전히 ​​흐릿하게 표시됩니다. 어떻게 수정할 수 있는지 조언 해주세요.

이미지도 여전히 흐릿합니다.

window.devicePixelRatio = 2;

나는 html2canvas를하기 전에 이것을 넣었고 그것은 나를 위해 일했습니다.

안녕하세요, 페르시아어 텍스트 utf8을 입력하고 싶지만 글꼴이 작동하지 않습니다.
이 문제를 해결하는 방법

http://jsfiddle.net/o0a8pbwd/1/ 코드로

이 그림은 왜 알지 못합니까?