canvas -> image 로 바꾸는 방법 + 크로스도메인 이슈

canvas로 생성한 이미지의 경우 데스크탑에서 오른쪽버튼 누르면 이미지로 저장할 수 있었는데. .모바일에선 이미지로 저장할 수 없었다. 화면자체에 Image로 표시해주기 위해 아래같이 코드사용.

        var myImage = document.createElement('img');
        myImage.crossOrigin="*";
        myImage.width=760;
        myImage.height=760;
        myImage.src = canvas.toDataURL('image/jpg');

canvas의 toDataURL()을 사용하게 되면 현재 캔버스의 url을 갖고오게 되고, 이미지의 src로 설정하면 Image로 나오게된다.

그런데 테스트시 계속 아래같이 크로스도메인 이슈가 나오게 된다.

dynamicrunners.html:114 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Image.CreateCanvas._img.onload

우선 크로스도메인 이슈란? 아래 링크를 읽어보면 이해가 되지만, 서로 다른 도메인을 사용하게 되면 문제가 발생하는 것이다. 내 테스트의 경우엔 백그라운드 사용하는 이미지가 로컬호스트라서 도메인 이슈가 발생하는건데 이 이미지를 제외하면 canvas가 이미지로 잘그려지는 걸 확인할 수 있었다.

https://ooz.co.kr/232

CORS 크로스 도메인 이슈 (No 'Access-Control-Allow-Origin' header is present on the requested resource)

어쨋든 크로스도메인 이슈는 도메인이 다르고 현재 사용하는 이미지가 로컬호스트이기떄문에 발생인데.. 어차피 깃서버에 올려서 확인할건데.. 올려서 테스트하면 문제가 없겠구나 싶었다. 바로 올려서 테스트해보니 정상적으로 동작하는것 확인!! 이미지로 잘그려지고 있다. 모바일에서도 이미지로 정상적으로 다운