javascript - 캔버스 자르기 빈 영역

Question

canvas을 사용하여 전자 서명을 했는데 사용자가 서명한 후 공간이 너무 많이 남았습니다. 공백을 캡쳐할 수 있는 방법이 있나요?
샘플 원본 이미지:

서명 과정에서 마우스가 지나간 영역을 얻어 아래와 같이 빨간색 영역의 좌표를 얻었습니다.

그런 다음 img 개체에 전달한 다음 img 对象，再绘制到 canvas에 그려 빨간색 영역을 자릅니다.

다른 방법이 있나요?

감사합니다!

Answer 1

우선, 1차원 배열인 데이터 속성을 가진 현재 캔버스의 이미지 데이터 개체를 반환합니다. 이 1차원 배열에서 4개의 첨자는 모두 R을 나타냅니다. G, B, A 값의 경우 작성자는 경계를 찾기 위해 이 값만 탐색하면 됩니다. 으아악

Answer 2

왼쪽 상단 모서리와 오른쪽 하단 모서리의 좌표 또는 오른쪽 상단 모서리와 왼쪽 하단 모서리의 좌표를 유지하려면 한 줄씩 스캔하여 ImageData를 통해 픽셀을 스캔합니다.

Answer 3

으아아아

Answer 4

단순히 카르바스를 확대하는 것이 귀하의 요구를 충족시킬 수 있는지 모르겠습니다.
원본 포스터는 빨간색 상자에 그림이 있다는 것을 의미하며, 그러면 그림의 너비와 높이를 알 수 있고 이미지와 카르바스를 계산할 수 있습니다. Carvas의 너비와 높이를 기준으로 확대/축소 비율
ctx.scale(widthScale, heightScale) 메서드를 통해 확대 비율을 설정합니다.
그런 다음 ctx가 이미지를 그립니다.

Answer 5

포스터로 문제가 해결되었나요? 지정된 좌표의 직사각형 이미지를 얻으셨나요?