MDN의 색상 피커 예제가 작동하지 않습니다. 그리고 제 코드도 같습니다

Mozilla Developer Network 페이지에는 getImageData()를 사용하여 색상 선택기를 만들 수있는 예제가 있습니다. 코드는 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#A_color_picker에서 확인할 수 있습니다.MDN의 색상 피커 예제가 작동하지 않습니다. 그리고 제 코드도 같습니다

MDN 페이지에서 제대로 작동하는 것 같습니다. 하지만 CodePen 또는 JSFiddle에서는 문제가 발생합니다. 비슷한 문제가있는 지침을 따르려고했는데 img.src를 URL로 설정할 때이 오류가 발생합니다. 잡히지 않은 TypeError : 'CanvasRenderingContext2D'에 'drawImage'를 실행하지 못했습니다 : 제공된 값이 형식이 아닙니다 '(CSSImageValue 또는 HTMLImageElement 또는 HTMLVideoElement 또는 HTMLCanvasElement 또는 ImageBitmap 또는 OffscreenCanvas) '. 누군가 나를 도울 수 있기를 바랍니다.

출처

2017-04-04 Huy Tran

이 CORS [문제] (http://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-처럼 보인다 origin-data) – Legends

@Legends 예입니다. 그것은 img.crossOrigin = "Anonymous"로 수정되었습니다. 그러나 문제는 여전히 지속됩니다. 코드를 테스트 할 때마다 탭을 해제하고 다시 켜야합니다. 처음 열 때만 작동합니다. F5로 새로 고침하면 오염 된 캔버스 오류가 발생합니다. 탭을 다시 시작하지 않고 코드를 테스트 할 수있는 방법이 있습니까? 그리고이 문제는 컴퓨터에서 게임을 새로 고칠 때 다른 사람들에게 영향을 미칩니 까? –

img src 뒤에 JS 섹션에이 행을 추가하고 페이지에서 예제가 작동합니다.

img.crossOrigin = "Anonymous"

크로스 원산 오염 및 HTML 캔버스와 관련이 있습니다. 명백히 요소가 다른 도메인에서 온 경우 캔버스가 오염되어 위의 선으로 올바른 교차 원점 특성을 설정하지 않으면 데이터를 가져올 수 없습니다. 이 오류는 소스에서 전송되었을 때 헤더가 이미지에 설정되지 않은 경우에도 발생할 수 있습니다.

CodePen에서이 블로그 게시물에 자세한 내용이있다 : https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/

여기에 작동하는 CodePen에 대한 링크입니다!
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0

출처

2017-04-04 21:10:19 illuminatedSpace

좋아요! 이제 작동합니다. 하지만 매번 코드를 테스트하고 싶을 때마다 탭을 해제하고 다시 켜야합니다. 처음 열 때만 작동합니다. F5로 새로 고침하면 ** 오염 된 캔버스 오류 **가 발생합니다. 탭을 다시 시작하지 않고 코드를 테스트 할 수있는 방법이 있습니까? 그리고이 문제는 컴퓨터에서 게임을 새로 고칠 때 다른 사람들에게 영향을 미칩니 까? –

탭을 끄면 무엇을 의미하는지 완전히 이해하지 못합니다. 코드 펜의 예와 관련해서는 문제가 없으므로 다른 컨텍스트에 대해 이야기하고 있다고 가정합니다. 코드 스 니펫을 본다면 아마도 도움이 될 것입니다. – illuminatedSpace

내 코드의 문제점은이 CodePen [link] (http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0)과 정확히 같습니다. 그것은 어떻게 든 페이지가 처음 열릴 때만 작동합니다. ** F5 **로 페이지를 새로 고침하면 ** 오염 된 캔버스 오류 **가 다시 발생합니다. 탭을 닫고 ** 링크를 클릭하여 새로운 탭을 열면 다시 작동합니다. –

자신의 codepen 예를 작동하지 않는 이유 :. 당신이 당신의 캔버스에 CORS의 승인없이 이미지를 사용할 수 있지만

이

"하고 그래서 캔버스를 taints 일단 캔버스가 오염 된, 더 이상 당길 수없는 데이터를 다시 예를 들어 canvas toBlob(), toDataURL() 또는 getImageData() 메서드를 더 이상 사용할 수 없습니다. "(Ironically also from MDN)

출처

2017-04-04 21:06:33

MDN의 색상 피커 예제가 작동하지 않습니다. 그리고 제 코드도 같습니다

답변

관련 문제