canvas와 data url 전부 포기하셔야 합니다

canvas 도 크기 제한이 있고, data url 도 크기 제한이 있습니다

canvas는 평균적으로 2.5억픽셀 정도의 제한이 있고

dataurl은 2MB 정도의 제한이 있습니다

아하...그럼 다른 방법으로, canvas를 blob로 바꿔 저장하려 합니다. 그래서 다음과 같은 코드를 짰는데, 실제로 다운로드를 시도하면 blob화 시켰을 때, 다운로드는 잘되나, 이미지가 깨지는 현상이 발생합니다. 어떻게 고칠 수 있을까요?
```js
let url = canvas.toDataURL();
                let a = document.createElement('a');
                a.download = `${document.querySelectorAll("div > span[class*='font-medium1-bold']")[0].innerText}.png`;
                if (url === 'data:,') {
                    alert("링크 생성 실패! Blob로 다시 시도합니다!");
                    canvas.toBlob(blob => {
                        let b = new Blob([blob], {type:'image/png'});
                        let reader = new FileReader();
                        reader.onload = () => {
                            console.log(reader.result);
                            a.href = reader.result;
                            a.click();
                        }
                        reader.readAsDataURL(b);
                    });

                }
                else {
                    console.log(url);
                    a.href = url;
                    a.click();
                }
```

해당 코드를 실행하니, 이미지가 4B정도의 메우 작은 크기로 다운로드되는걸 확인했습니다. 캔버스는 그대로인데, 어디가 문제인건가요?

캔버스의 이미지는 정상적으로 렌더링이 되어 있는건가요?

또, toBlob() 으로 blob 추출까지는 잘 알겠는데

FileReader 에서 결국 dataUrl으로 읽어들이니 동일하게 dataUrl 제한에 걸리지 않겠습니까

다음은 수정된 코드입니다.
```js
let url = canvas.toDataURL();
                let a = document.createElement('a');
                a.download = `${document.querySelector("div > span[class*='font-medium1-bold']").innerText}.png`;
                if (url === 'data:,') {
                    alert("링크 생성 실패! Blob로 다시 시도합니다!");
                    canvas.toBlob(blob => {
                        let b = new Blob([blob], {type:'image/png'});
                        let b2 = URL.createObjectURL(b);
                        console.log(b2);
                        a.href = b2;
                        a.click();
                    });
                }
                else {
                    console.log(url);
                    a.href = url;
                    a.click();
                }
```
이렇게 해도 여전히 작은 캔버스는 잘 다운로드 되나 큰 캔버스는 다운로드가 정상적으로 작동하지 않습니다...

아무래도 캔버스 문제같네요 답변해주셔서 감사합니다

질문

안녕하세요, 저는 캔버스에 이미지를 그리고 그걸 다운로드 하는 프로그램을 작성하려 합니다. 그래서 캔버스에 이미지를 넣는 것은 잘 작동하는데, 다운로드 하는 부분에서 문제가 발생합니다. 저는 캔버스의 크기를 유저가 직접 입력할 수 있게 했는데, 그러니까 캔버스의 크기가 너무 커질 경우, canvas.toDataURL을 시도할 경우 `data:,`를 반환합니다. 당장 720 * 88444만 해도 해당 문자열을 반환하는데, 어떤 방식으로 다운로드를 시켜야할까요?