캔버스에 이미지 그리기

Question

HTML5 캔버스를 사용하여 이미지 뷰어 응용 프로그램을 만들고 있습니다. 두 개의 캔버스를 사용했습니다. 첫 번째 이미지는 사용자에게 표시되지 않는 실제 너비와 높이의 이미지를로드하는 데 사용됩니다 (이는 숨겨진 캔버스가 DOM 트리에 추가되지 않음). 실제로 두 번째 캔버스는 실제로 사용자에게 표시됩니다. 이미지의 실제 해상도는 1200 * 800입니다. 크기 1200 * 800의 숨겨진 캔버스에 이미지를로드했습니다. 그런 다음 해상도 700 * 600의 캔버스에 이미지를로드하려고했습니다 (ctx.drawImage (hiddenCanvas, 0,0,700,600)와 같은 코드를 추가했습니다. 이 해상도에서 전체 이미지는. 나는 눈에 보이는 캔버스에로드 할 때

1. 그것을 가로 세로 비율을 유지합니다. 아래의 질문이? 아니면 수동으로 화면 비율 조작을하게한다.
가
2. 그것은 이미지의 품질을 잃을 것 이미지 뷰어 응용 프로그램을 수행하기위한 표준 방법입니까?

줌인, 줌아웃, 팬 같은 기능을 추가해야합니다. 이 뷰어에

제발 누구든지 내 질문에 답변 할 수 있습니다.

Answer 1

,0,0,700,600라고 말하면 가로 세로 비율이 자동 지정됩니다.

대부분의 크기 조정 작업은 이미지 품질을 저하시킵니다. 1200x800 이미지를 700x600 크기로 조정하면 수행 할 보간법 (선형, 바이 큐빅 등)이 생깁니다.

Answer 2

당신은

var name=new Image(); 
name.src="name.fileformat"; 
context.drawImage(name,X, Y, sizeX, sizeY); 

를 사용할 수 있지만 팬, 줌 및 다른 사람을 위해 나는 그들을 '한판 승부'는 아무것도하지 않습니다.