작은 캔버스에 캔버스 그리기 작동하지 않음

Question

프로젝트의 경우 캔버스 (SAVE_CV라고 함)의 내용을 가져 와서 다른 작은 캔버스에 표시하고 싶습니다.

캔버스의 크기를 조정하면 캔버스의 JS 크기가 CSS 크기와 다르다는 것을 지금까지 알고 있습니다.

작은 캔버스를 500px 넓고 적절하게 높이 싶습니다.

function restoreTaggingCV() { 
    var cv = document.getElementById('taggingCV'); 
    var ctx = cv.getContext("2d"); 
    var styleHeight = SAVE_CV.height * 500/SAVE_CV.width; 
    ctx.drawImage(SAVE_CV, 0, 0, cv.width, cv.height); 
} 

이것은 지금까지의 코드입니다. 작은 캔버스의 크기를 적절하게 조정하려고 할 때마다 아무 것도없는 빈 캔버스 만 제공합니다. "cv.height = X" and "cv.style.height = styleHeight + 'px'"으로 크기를 설정하려고했지만 둘 다 작동하지 않았습니다. 또한 CSS를 사용하여 캔버스의 너비를 설정하고 싶습니다.

감사합니다. 나중에 내가 그 큰 버전에서 몇 군데 개인을 만드는 데 사용할 작은 버전의 영역을 표시하는 사용자를 원하기 때문에

편집 나는 그림에서 이미지를 원한다. 나는이 영역을 사용자에게 시각화하고 싶다. 아마도 이미지를 사용하고 div를 배치하여이 모든 작업을 수행 할 수는 있었지만 HTML 및 CSS에 익숙하지 않아서 캔버스를 사용하여 더욱 만족 스러웠습니다.

Answer 1

CanvasRenderingContext2d.prototype.scale 방법을 사용해보십시오. 캔버스의 배율을 설정하고 배율에 배율을 곱한 값으로 현재 상태의 모든 것을 렌더링합니다.

따라서 drawImage 함수를 사용하기 전에 컨텍스트를 적절하게 조정합니다 (이 경우, 아래로). 예 :

context.save(); 
context.scale(0.5, 0.5); 
context.drawImage(canvas, 0, 0); 
context.restore(); 

이것은 현재 크기의 0.5 배로 컨텍스트에서 캔버스를 렌더링합니다. this fiddle에서 더 작은 캔버스를 다른 하나의 캔버스로 미러링하는 방법을 참조하십시오.

Answer 2

캔버스 개체는 크기를 조정하는 것을 싫어합니다. 그리기 후 이미지를 단순히 DataURL()로 변환하고 이미지 소스로 설정합니다. 원하는대로 이미지의 크기를 조정할 수 있습니다.

$img.attr('src',canvas.toDataURL());