픽셀로 자바 스크립트의 사용자 정의 커서

Question

커서의 이미지 데이터가 2 바이트 배열로 있습니다.이 원시 데이터로 맞춤 커서를 만들고 싶습니다. 아무도 자바 스크립트의 url() 함수로 작성하는 방법을 알려주시겠습니까?

Answer 1

커서에 할당 CSS를 사용하지만, 어떤 종류의 형식이 필요합니다. 이미지를 만들 때 canvas을 사용하고 있습니까? 그렇다면, 당신은 다음과 같이 변환 자바 스크립트를 사용할 수 있습니다

var canvas = ... // look up canvas node 
var cursorAsData = canvas.toDataURL(); 

// NOTE: jQuery or another library would make this much easier. 
var nodeThatNeedsCursor = ... // look up node for cursor 
nodeThatNeedsCursor.style.cursor = "url("+cursorAsData+")"; 

이것이하는 일은 다음과 같이 보이는 data URI으로 캔버스, 반환입니다 : 이것은 사용할 수 있습니다

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt... 

을 스타일 시트의 url()에있는 거의 모든 최신 브라우저에서 사용할 수 있습니다.

스타일 시트에 항목을 인코딩하려는 경우 원본 이미지가 있으면 Data URI encoder like this one을 사용하면 이미지를 업로드하고 인코딩 된 문자열을 반환 할 수 있습니다.

그러나 이미지의 원시 바이트 문자열이있는 경우 변환을 위해 please see this stackoverflow answer을 사용하고 위의 데이터 URI 스킴을 사용하십시오.

Answer 2

그렇다하더라도 이미지 편집 소프트웨어를 사용하여 GIF 또는 PNG를 작성하고 당신은 원시 픽셀을 캡슐화하는 data URI를 사용할 수 있습니다

item { 
    cursor: url(image.png); 
} 

Answer 3

파일이나 데이터 URL에서 사용자 정의 커서를로드하려면 표준 세트의 대체 커서를 포함해야합니다. 그렇지 않으면 브라우저는 커서 속성을 무시합니다. 이처럼 (나에게이 작은 문제를 발견하기 전에 작업을 얻으려고 노력의 시간을했다) :

item { 
    cursor: url(image.png), crosshair; 
} 

64 기수 데이터가 작동합니다 인코딩,하지만 난 당신이 변환 할 방법을 생각하지 수 있는지 궁금