custom cursor in javascript by pixels

Question

I have image data of cursor in in 2d byte array .I want to make custom cursor by this raw data.If anybody know please tell how to make by url() function of javascript?

Answer 1

You might be able to use a data URI to encapsulate the raw pixels, but even then you need to have some kind of format. Are you using a canvas to create the image? If so, you might be able to use JavaScript to convert it like this:

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+")";

What this does is return the canvas as a data URI, which looks like this:

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

This can be used in just about all modern browsers directly in a url() in a stylesheet.

If you just want to encode the item in a stylesheet, and you have some sort of source image, you can use a Data URI encoder like this one, which lets you upload an image and returns encoded string.

But if you just have a raw byte string for the image, please see this stackoverflow answer for the conversion, then use the data URI scheme above.

Answer 2

If you want to load a custom cursor (either from a file or from a data url) you also need to include a fallback cursor from the standard set or the browser will ignore the cursor property. (took me an hour of trying to get it to work before finding this little issue) Like this:

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

Answer 3

create the gif or png using an image editing software, and use css to assign it to the cursor

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