javascript - 캔버스 처리 이미지 문제

Question

사용자가 업로드한 사진을 처리하려면 캔버스를 사용해야 합니다. 사용자가 업로드한 크기가 매우 클 수 있습니다. 예를 들어 현재 브라우저 창의 너비와 높이를 초과하므로 표시되는 크기에 비례하여 크기를 조정합니다. 그런 다음 캔버스에 그리는데 이는 사용자의 그림을 줄이는 것과 같습니다. 캔버스를 처리한 후 처리된 그림을 흐려짐 없이 원래 크기로 복원할 수 있는 방법이 있습니까?

아래에서 Gu Yue와 Jack에게 엄지손가락을 치켜세울 사람은 누구일까요? 그들이 말한 것이 올바른 방법입니다!

Answer 1

캔버스의 너비와 높이는 이미지의 원본 크기와 동일하게 설정되지만 스타일은 캔버스를 보이는 영역에 맞게 조정하는 데 사용됩니다. 이렇게 하면 이미지가 압축되지 않습니다

Answer 2

초대해주셔서 감사합니다. 답변드리고 싶은데 해보지는 않아서 모르겠네요. 물론 직접 시도해 볼 수도 있지만 어쨌든 시간이 많이 걸리지는 않습니다.
하지만 생각은 바꿀 수 있어요. 왜 이미지를 줄여서 캔버스에 그리려고 하시나요?
최대 너비나 최대 높이 없이 이미지를 보이는 영역에 맞게 크기를 조정할 수는 없나요? 이것은 단지 이미지가 표면에서 축소된 것입니다. 실제로 naturalWidth 및 naturalHeight는 변경되지 않았으므로 확대/축소 복원은 실제로 필요하지 않습니다.
img를 사용하여 브라우저의 보이는 영역 내에 표시할 수 있습니다. 캔버스는 이미지 처리에 사용되지 않습니다. 캔버스에서 처리 중인 이미지를 표시해야 하는 경우 다른 오프스크린 캔버스를 만든 다음 관련 처리의 크기를 비례적으로 조정하고 마지막으로 오프스크린 캔버스를 저장하면 됩니다.
명확하게 했는지 모르겠네요.

Answer 3

HTML5 이미지 업로드 전처리 https://juejin.im/entry/5933e...