html2canvas가 왼쪽 상단에 이미지를 렌더링하지 않습니다.

Question

웹 페이지에 차트가 있는데 html2canvas를 사용하여 이미지로 추출합니다. 추출 된 이미지 품질이 흐릿하고 크기를 4 배 더 크게하여 화질을 높이고 싶습니다.

정상 기능 :

function exportChart() { 
html2canvas($("[id$='extract']"), { 
    onrendered: function (canvas) { 
     var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
     var a = document.createElement('a'); 
     a.href = image; 
     a.download = 'chart.png'; 
     a.click(); 
    } 
}); 

더 큰 크기 기능 :

function exportChart(e) { 
var scaleBy = 4; 
var w = 1000; 
var h = 1000; 
var div = document.querySelector('#extract'); 
var canvas = document.createElement('canvas'); 
canvas.width = w * scaleBy; 
canvas.height = h * scaleBy; 
canvas.style.width = w + 'px'; 
canvas.style.height = h + 'px'; 
var context = canvas.getContext('2d'); 
context.scale(scaleBy, scaleBy); 

html2canvas(div, { 
    canvas:canvas, 
    onrendered: function (canvas) { 
     var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
     var a = document.createElement('a'); 
     a.href = image; 
     a.download = 'chart.png'; 
     a.click(); 
    } 
}); 

결과는 내가 더 나은 품질의 이미지를 가지고 있지만, 그것은 정상적인 기능을 위해 발생하지 않습니다 왼쪽 상단에 배치되지 것입니다. 더 큰 이미지 (오른쪽)를 왼쪽 상단에 배치하려면 어떻게해야합니까?

Answer 1

context.scale() 기능은 캔버스 내부의 이미지 시작 위치를 변경합니다.

이렇게 설명하면 결과가 나옵니다.