javascriptのカスタムカーソルでピクセル

Question

2dバイト配列でカーソルの画像データがあります。この生データでカスタムカーソルを作成したいと思います。誰かがjavascriptのurl（）関数で作成する方法を教えてください。

Answer 1

カーソルに割り当てるCSSを使用しています何らかの形式を取る必要があります。イメージを作成するのにcanvasを使用していますか？もしそうなら、あなたはこのようにそれを変換するために、JavaScriptを使用することができるかもしれない：

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

これを使用することができます。

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としてキャンバスを返すです最近のブラウザのほとんどすべてで、スタイルシートの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; 
}