javascript中的自定义光标按像素答案

【问题标题】：custom cursor in javascript by pixelsjavascript中的自定义光标按像素
【发布时间】：2012-06-04 14:43:58
【问题描述】：

我在 2d 字节数组中有光标的图像数据。我想用这个原始数据制作自定义光标。如果有人知道请告诉如何通过 javascript 的 url() 函数制作？

【问题讨论】：

【解决方案1】：

您也许可以使用data URI 来封装原始像素，但即便如此，您也需要某种格式。您是否使用canvas 创建图像？如果是这样，您也许可以使用 JavaScript 将其转换为：

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 方案。

【讨论】：

我想知道 base64 编码数据是否可行，但我想不出如何将任意数据临时转换为必要的格式。我怀疑可能涉及帆布。
您是指 Sun/Oracle 中的 Java 吗？因为您在原始问题中只提到了 JavaScript。
nodeThatNeedsCursor.style.cursor = "url("+cursorAsData+")";它不适用于火狐

【解决方案2】：

使用图像编辑软件创建gif或png，并使用css将其分配给光标

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

【讨论】：

【解决方案3】：

如果您想加载自定义光标（从文件或数据 url），您还需要从标准集中包含一个备用光标，否则浏览器将忽略光标属性。（在发现这个小问题之前，我花了一个小时试图让它工作）像这样：

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

【讨论】：