캔버스 이미지 (securityError)

-1

barfly, 캔버스 이미지에 문제가 있습니다. (securityError) 나는 방문 카드를 디자인하기위한 도구를 만들었습니다. 여기에서는 텍스트 용 캔버스와 로고 용 캔버스를 사용합니다. 로고 이미지를 삽입하지 않으면 모든 것이 정상적으로 작동합니다. 하지만 이미지를 삽입하면 securityError가 발생합니다. (처음에는 그것도 효과가 있었고, 나는 그 문제를 일으키는 변화를 이해할 수 없다). 이제 html2canvas를 PHP 파일에 아약스를 통해 보내기 전에 만들어 보았습니다. 그러나 여전히 같은 문제. 그것은 로고없이 작동하며 로고가 삽입되면 securityError를 던집니다. 이것은 나를 가장 혼란스럽게합니다. 내 서버에 모든 것을 설정했습니다. URL은 다음과 같습니다 : http://obs-design.de/visitenkarten/ 이미지를 추가하려면 편집기에서 이미지 아이콘을 클릭하여 텍스트 캔버스를 dobleclick하십시오. 계속 진행하면 원래 앱 아래에 html2 캔버스가 표시됩니다. (여기에도 이미지가 있습니다). 업로드 된 이미지 파일은 http://obs-design.de/visitenkarten/canvasimg/visitenkarte.png (이미지가 포함되지 않은 경우에만)에서 호출 할 수 있습니다. 나에게 힌트가있는 사람이 있습니까? 미리 감사드립니다.캔버스 이미지 (securityError)

출처

2016-09-25 barfly

처음에는 [물어보기] (http://stackoverflow.com/help/how-to-ask) 페이지로 이동할 수 있습니다 ... – Teemu

안녕하세요, 나를 만나서 반갑습니다! :) ... 보안 오류 문을 포함하십시오. –

오류 문은 다음과 같습니다 : [link] SecurityError : 작업이 안전하지 않습니다. 오류 소스 행 : \t var canvasData = canvas.toDataURL ("image/png"); 그러나 Kaiido의 도움으로 나는 그것을 고칠 수 있었고 이제는 모든 것이 잘 작동합니다. 어쨌든 당신의 관심에 많은 감사드립니다. barfly – barfly

body 요소에 html2canvas()을 호출했기 때문입니다.

귀하의 문서에 적절한 CORS 헤더가로드되지 않은 https://code.jquery.com/ui/1.12.0/themes/base/images/ui-icons_444444_256x240.png에 대한 참조가 포함되어 있습니다.

간단한 수정은 #innerbox 요소에서 html2canvas를 호출하는 것입니다. 문서의이 부분에는 캔버스를 오염시킬 것이 없으므로 원하는대로 모든 내보내기 방법을 호출 할 수 있습니다.

캔버스 요소에는 crossOrigin 특성이 없으므로 해당 컨텍스트에 그려지는 미디어 리소스가 원본 교차 요청과 함께 제공되어야하며 캔버스 수준에서는 수행 할 수 없습니다.

출처

2016-09-25 12:20:34 Kaiido

도움 주셔서 감사합니다. 이제 모든 것이 잘됩니다. – barfly

안녕하세요 Kaido - 처음에는 모든 것이 괜찮습니다.하지만 그렇지 않습니다. 전에는 때로는 효과가 있었지만 다시 실패했습니다. 나는 canvas (html2canvas로 만든 캔버스)와 이미지의 유무를 이해할 수 없다.이 두 캔버스의 차이점은 무엇인가? 헤더에 crossOrigin을 다음과 같이 포함했습니다. . 이게 맞지 않니? CORS 헤더는 어디에서 어떻게 포함합니까? 귀하의 도움에 미리 감사드립니다. – barfly

cors 헤더는 캔버스에 그릴 미디어를 호스팅하는 서버에서 보내집니다. 서버가 crossOrigin 요청을 수락하도록 구성되어 있지 않으면 운이 없어진 것입니다. src를 설정하기 전에 img 태그에 crossIrigin 속성을 설정해야합니다. 그러면 서버가 cors를 준수하기를 원할 것입니다. – Kaiido

캔버스 이미지 (securityError)

답변

관련 문제