캔버스를 큰 이미지로 리사이즈하여 서버로 보내십시오.

Question

안녕하세요 저는 웹 페이지에 캔버스가 있습니다. 문제는 캔버스가 550x380 픽셀과 비슷하며 9933x7016 픽셀 인 A1 형식과 같은 이미지를 내 보낸 다음 서버로 보내야한다는 것입니다. 그게 가능합니까?

Answer 1

너비와 높이 속성을 설정하여 캔버스의 크기를 조정할 수 있습니다.

// ? is a Number < 32767 
canvas.width = ?; 
canvas.height = ?; 

그러나 캔버스 해상도를 변경하면 취소 될 수 있습니다. 이미지를 유지하려면 새 캔버스를 만들어야합니다.

var newCan = document.createElement("canvas"); 

그런 다음 원하는 크기로 설정하십시오.

newCan.width = ? 
newCan.height = ? 

그런 다음 이전 캔버스를 복사합니다. 당신은 당신이 확장해야합니다이를 위해 모든 콘텐츠를 렌더링 다시하는 경우

var ctx1 = newCan.getContext("2d"); 
ctx1.drawImage(canvas,0,0,newCan.width,newCan.height); 

는 9933x7016에 550x380 픽셀에서 캔버스의 변경은 정말 일을 가치가있을 것입니다.

// canvas is the old canvas (small) 
var scaleX = newCan.width/canvas.width; 
var scaleX = newCan.height/canvas.height; 
// set scale on new canvas 
ctx1.setTransform(scaleX, 0, 0, scaleY, 0, 0); 

그런 다음 렌더링 값을 변경하지 않고 높은 해상도로 콘텐츠를 다시 렌더링 할 수 있습니다.

또한 많은 기계가 "메모리 부족 오류"또는 크래시가 발생하는 큰 캔버스를 처리 할 수 ​​없습니다. 컴퓨터에 메모리가 있고 브라우저 탭이 계속 실행중인 경우 많은 컴퓨터에서 캔버스를 표시 할 때 매우 느리게 업데이트됩니다. 9933x7016은 280Mbytes에 가까운 GPU 또는 CPU RAM이 필요합니다. 컴퓨터에 RAM이 있더라도 사용 가능하지 않을 수 있습니다. 따라서 클라이언트가 최소한 다시 시도 할 수 있도록 캔버스 컨텐츠에 필요한 생성 된 데이터의 백업을 확보하십시오.