自定义光标在javascript像素

custom cursor in javascript by pixels

本文关键字：像素 javascript 光标 自定义      更新时间：2023-09-26

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

您可能能够使用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+")";

返回画布作为数据URI，如下所示:

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

这可以在几乎所有现代浏览器中使用，直接在样式表中的url()中使用。

如果您只想在样式表中对项目进行编码，并且您有某种源图像，则可以使用像这样的Data URI编码器，它允许您上传图像并返回编码字符串。

但是如果你只有一个原始字节字符串的图像，请参阅这个stackoverflow答案的转换，然后使用上面的数据URI方案

使用图像编辑软件创建GIF或PNG，并使用CSS将其分配给光标

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

如果要加载自定义游标(从文件或从数据url)，还需要包含来自标准集的回退游标，否则浏览器将忽略游标属性。(在发现这个小问题之前，我花了一个小时试图让它工作)这样的:

item {
    cursor: url(image.png), crosshair;
}
相关文章：