ピッコマ 뷰어 이미지 처리 방식 구현 질문입니다!

안녕하세요.
이쪽에서 질문을 해도 되는 사항인지 모르겠네요.
카카오가 일본에서 서비스중인 ピッコマ를 보면서 이미지 처리 방식에 대해 궁금증이 생겨 질문을 드립니다.

img3

img4

위 이미지처럼 변환하는 기술의 명칭을 뭐라고하는지는 정확히 몰라 임시로 모자이크라고 불러보겠습니다.
이미지를 base64로 변환하여 구분자로 나눈 뒤에 미리 입력된 키값을 통해서 키값에 해당되는 위치로 배열을 이동하여 원래 이미지로 돌리거나 혹은 모자이크된 이미지로 바꾸는 기술이라고 생각되는데요.

javascript로 이 기능을 구현해보고 있는데, 생각보다 쉽지가 않네요.

나름 이미지의 base64포맷에 대해서 생각해보았으나 어느 부분이 잘못된건지 생각처럼 구현이 잘 안됩니다.

base64에서 data:image/png;base64, 부분까지가 이미지 포맷의 정보에 관한 내용을 담고 있는것 같구
그 뒤로 /를 구분자로하여 이미지의 픽셀 정보를 담고 있을것 같다는 생각을 해서
/로 나눠진 배열을 오브젝트에 담아 배열의 위치를 바꿔보았는데요.
픽셀의 위치가 변경된 이미지가 나올것으로 예상하였으나,
잘못된 형식의 이미지라서 이미지를 불러올 수 없다고 합니다.

base64이미지에서 각 구분자로 나눠진 데이터들은 어떤걸 의미하고 있나요?

위 이미지 제어 기술에 필요한 지식은 어떤게 있나요?

이쪽에 질문할 사항이 아니였다면 정말 죄송합니다