고정 해상도의 base64 이미지

Question

내 웹 응용 프로그램에서 사용자는 자신의 모바일 장치에서 카메라로 사진을 찍을 수 있습니다. 그러면 사진이 캔버스에 표시됩니다.

<canvas id="photo" ></canvas> 

이제 사진을 백엔드 서버로 보내려고합니다. 이 작업을 수행하는 가장 좋은 방법은 이미지를 base64 문자열로 인코딩하는 것입니다.

그러나 사진이 항상 인 , 예를 들어 100 x 100 픽셀이되도록하고 싶습니다. 그렇지 않으면 base64 문자열이 너무 큽니다.

현재 그림의 내보내기 품질을 결정하기 위해 second parameter of toDataURL을 사용하고 있습니다. (여기 2 %).

var base64 = document.getElementById("photo").toDataURL("image/jpeg", 0.02); 

사진의 초기 해상도를 알지 못하기 때문에 좋은 방법은 아닙니다. 그래서 저는 항상 같은 해상도로 사진을 찍고 싶습니다. 이것을 달성하는 방법?

Answer 1

크기가 100x100 인 보이지 않는 배경 캔버스를 사용하여 사진 캔버스의 이미지를 복사 할 수 있습니다. drawImage 함수를 사용하면 대상 사각형의 크기를 지정할 수 있습니다.

// Create a temporary, invisible 100x100 canvas 
var tmpCanvas = document.createElement('canvas'); 
tmpCanvas.width = 100; 
tmpCanvas.height = 100; 
var tmpContext = canvas.getContext('2d'); 

// copy the content of the photo-canvas to the temp canvas rescaled 
var photoCanvas = document.getElementById("photo"); 
tmpContext.drawImage(photoCanvas,        // source 
        0, 0, photoCanvas.width, photoCanvas.height, // source rect 
        0, 0, 100, 100        // destination rect 
        ); 

// get data-url of temporary canvas 
var base64 = tmpCanvas.toDataURL("image/jpeg"); 

을하지만 소스 캔버스가 직사각형이 아닌 경우, 화면 비율은 유지되지 않습니다 것을 명심 : 그것은 소스 사각형과 동일하지의 경우, 콘텐츠는 크기가 조정됩니다. 이 기능을 원하지 않으면 자르기 또는 테두리 추가와 같이이 문제를 해결할 수있는 여러 가지 방법이 있습니다. 이들 중 대부분은 drawImage 호출에서 다른 소스 또는 대상 사각형을 선택하여 구현됩니다.