Question

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

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

Answer 2

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

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

Answer 3

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

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

自定义光标在javascript中的像素

3 个答案: