728x90 반응형 canvas3 canvas의 scale에 원리! *광고 클릭은 제게 큰 힘이됩니다! 업무를 함에 있어 canvas를 많이 이용하는데 resize를 위해 scale조정을 많이 하는것을보고 정리를 해야할거같아 글을쓴다. 1.CanvasRenderingContext2D.scale 기본적으로 캔버스의 한 단위는 1픽셀이다. scale은 배율을 조정하는것으로써 0.5 배율이며 단위크기는 0.5픽셀이되면 스케일링이 2배이면 한 다위가 2픽셀이되도록 단위크기가 증가한다. .scale(x,y) x :수평 방향의 배율입니다. 음수 값은 수직 축에서 픽셀을 뒤집습니다. 값은 1수평 확장이되지 않습니다. y :수직 방향의 배율입니다. 음수 값은 가로 축에서 픽셀을 뒤집습니다. 값은 1수직 확장이되지 않습니다. 예를들어보자 class App{ constructor(){ t.. 2021. 3. 18. resize된 canvas위에 대한 mouse좌표 스케일링 let rect = this.canvas.getBoundingClientRect(); let scaleX = this.canvas.width/rect.width; let scaleY = this.canvas.height/rect.height; //resize된 캔버스 마우스 pos 재정렬 this.mousePos.x = (e.clientX - rect.left)*scaleX this.mousePos.y = (e.clientY - rect.top)*scaleY 2021. 3. 18. XMLHttpRequest를 통해 canvas의 그린 이미지를 서버에 던지기 //canvas에 그려진 이미지를 base64로 변환 var dataurl = this.canvas.toDataURL("image/png"); var xhr = new XMLHttpRequest(); var data = { searchimage: dataurl }; xhr.crossOrigin = "Anonymous"; xhr.onload = function() { if (xhr.status === 200 || xhr.status === 201) { console.log(xhr.responseText); } else { console.error(xhr.responseText); } }; xhr.open('POST', '서버IP'); xhr.setRequestHeader('Content-Type', 'ap.. 2021. 2. 26. 이전 1 다음 728x90 반응형
