캔버스 이미지 자르기 속도 향상

Question

사용자가 마우스로 원하는 부분을 마우스로 그려주는 간단한 이미지 자르기 작업을하고 있습니다. 확인하면 나머지 이미지가 잘립니다. 여기에 내가 현재 말했다 자르기를 처리하고있어 방법은 다음과 같습니다

var data = c.getImageData(0,0,canvas.width,canvas.height);  
for (var x = 0; x < data.width; x++) { 
    for (var y = 0; y < data.height; y++) { 
     if (!c.isPointInPath(x,y)) { 
     var n = x + (data.width * y); 
     var index = n*4; 
     data.data[index+3] = 0; 
     } 
    } 
} 

을하지만,이 정말 빨리 수렁 수 있습니다. 보존하려는 이미지의 양이 적을수록 더 빠르지 만 이미지의 30 % (캔버스는 800x800)까지 저장하면 몇 초 동안 멈추게됩니다. 이 문제를 해결하는 더 빠른 방법이 있습니까?

Answer 1

당신이 사용자 정의 모양을 사용해야 할 때 속도를 실제 방법은 없습니다,하지만 늦추지하는 것은 작업자로 처리 할 수 ​​있습니다 : 여기

는 당신의 참고를위한 스크립트입니다.

Answer 2

왜 자르기 이미지 기능을 조작하기 위해 픽셀 세부 정보로 들어가는 지 이해할 수 없습니다. 실제로 이미지의 나머지 부분을 잘라내는 데 더 많은 시간이 필요하기 때문에 이미지가 더 커지면 이해할 수 있습니다. 사실상 픽셀의 2 차원 배열을 반복하면서 작업에 필요한 처리 시간이 작업 공간의 크기가 커질수록 기하 급수적으로 증가하기 때문입니다. 픽셀지도.

내 제안은 getImageData 및 putImageData 기능을 터치하지 않고도 기능을 다시 시도하는 것입니다. 그건 소용 없어. 나는 다음과 같은 방법으로 만들 것이다 :

1. mouse down에서 픽셀 좌표를 얻는다.
2. mouse move에 대한 이벤트 수신기를 만듭니다.
3. 원본 이미지 위에 반투명 이미지를 만들고 fillRect 함수를 사용하여 만든 캔버스에 그립니다.
4. mouse up에 대한 이벤트 수신기를 만듭니다.
5. mouse up에서 픽셀 좌표를 얻습니다.
6. 결과로 얻은 사각형의 좌표를 계산하십시오.
7. 결과 이미지를 사각형 좌표로 매개 변수로 사용하여 캔버스에 그립니다.
8. 마지막 단계로 이미지에 캔버스의 내용을 그립니다.

이렇게하면 이미지 자르기 처리에 많은 오버 헤드를 줄일 수 있습니다. https://github.com/codepo8/canvascropper/blob/master/canvascrop.js

Answer 3

몇 가지 아이디어 :

사용자가 그리는 다각형의 경계 상자에 getImageData을 제한합니다.

루프 내에서 변수에 사용 된 data.height, data.width 등을 넣습니다.

아마도 내부/외부 테스트를 분할하고 imagedata 알파 값을 설정할 수 있습니다.

검은 색과 흰색으로 다각형을 그릴 수도 있습니다. imagedata 개체는 두 개체의 차이점을 가져옵니다.

isPointInPath(x,y) 기능을 공유 할 수 있습니까?