캔버스 내용의 크기를 조정하고 이미지를 서버에 업로드하는 방법은 무엇입니까?

Question

캔버스 내용의 크기를 조정하여 대략 100x100 크기의 미리보기 이미지를 가져 와서 서버에 업로드하는 방법을 알아 내려고 노력했습니다. 이러한 모든 작업은 사용자에게 보이지 않아야하므로 기존 캔버스를 현재 크기로 유지하고 싶습니다.

toDataURL을 사용하여 캔버스의 현재 크기로 내용을 가져올 수 있지만 어떻게 크기를 조정 한 다음 서버에 업로드 할 수 있습니까?

var image = canvas.toDataURL("image/png"); 

Answer 1

Alexander Kremenets 덕분에 필자는 필요한 코드를 정리할 수있었습니다. Alexander가 연결된 question의 Hermite resize을 사용했습니다. 다른 질문의 코드도 다음과 같이 조합됩니다.

var originalCanvas = document.getElementById("c"); 
// Create canvas for resizing 
var resizeCanvas = document.createElement("canvas"); 
resizeCanvas.height = originalCanvas.height; 
resizeCanvas.width = originalCanvas.width; 

var resizeCtx = resizeCanvas.getContext('2d'); 
// Put original canvas contents to the resizing canvas 
resizeCtx.drawImage(originalCanvas, 0, 0); 

// Resize using Hermite resampling 
resampleHermite(resizeCanvas, resizeCanvas.width, resizeCanvas.height, 150, 90); 

// Use the resized image to do what you want 
var image = resizeCanvas.toDataURL("image/png"); 

Answer 2

당신은 다음 임시 캔버스 (Post about resizing in canvas)의 맥락에서 크기를 조정, 작업 캔버스 (이미지)에서 그 콘텐츠에 그릴 (DOM에 추가하지 않고) 당신의 JS 스크립트에서 캔버스를 만들 수 있습니다. 그리고 나서 canvas.toDataURL("image/png");을하면 크기가 조정 된 이미지를 얻을 수 있습니다. 그런 다음 base64 문자열로 보내고 서버에 png 파일로 저장합니다.