CODEWITHSUNDEEP
javascriptdomcursor
Jacko
Jacko

Reputation: 13195

Would like to change the cursor to an on-the-fly generated cursor image

My web app receives events from the server to change the cursor to a specified .cur file, and this .cur file is sent as a PNG to the browser (over WebRTC data channel). Is it possible to set the cursor to this in-memory .cur image ?

The line below will change the cursor to a .cur image stored at a URL. But, I would like to generate the cursor on the fly.

document.getElementById("video-container").style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";

Upvotes: 1

Views: 172

Answers (1)

kirschkern
kirschkern

Reputation: 1387

You may simply add the url to your image as cursor.

Something like this:

channel.onmessage = (event) => {
  const blob = new Blob([event.data], { type: "image/png" });
  var url = URL.createObjectURL(blob);
  var elm = document.getElementById("video-container");
  elm.style.cursor = "url('" + url + "'), auto";
};

Make sure to release the used memory with URL.revokeObjectURL after you've set the cursor.

Upvotes: 2

Related Questions