如何输入图像并将其用作光标？
Posted
技术标签:
【中文标题】如何输入图像并将其用作光标？【英文标题】：How to input an image and use that as the cursor? 【发布时间】：2020-10-26 08:43:21 【问题描述】：我正在尝试制作一个光标转换器，用户可以在其中上传图像，它将成为文档<body> 上任意位置的光标。但是，它似乎不起作用。我试过.append 和.appendChild，但它似乎不起作用。我哪里出错了？
function readURL(input)
if (input.files && input.files[0])
var reader = new FileReader();
reader.onload = function(e)
$('#uploaded1').attr('src', e.target.result);
$("#upload-cursor").css("display", "block");
$("#upload-cursor").click(function()
$("body").css("cursor", "url(" + e.target.result + "), auto");
);
;
reader.readAsDataURL(input.files[0]);
$("#imgInp").change(function()
readURL(this);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5>Upload Cursor</h5>
<form runat="server">
<input type='file' id="imgInp">
<img id="uploaded1" src="#" >
<br>
</form>
<button id="upload-cursor" style="display: none;">Create Cursor</button>【问题讨论】：
并非所有浏览器都支持所有图像格式，并且图像可以具有的最大尺寸也可能受到限制 - developer.mozilla.org/en-US/docs/Web/CSS/… 您的代码对我来说运行良好 - 我保存了 SO 的 favicon.ico，选择了它并且运行良好。 【参考方案1】：如上述答案，您的图像尺寸可能很大，因此请调整图像大小。
使用File API调整大小，然后您可以使用canvas element处理图像。
Mozilla Hacks blog post 将引导您完成大部分流程。以下是博客文章中汇编的源代码供参考：
// from an input element
var filesToUpload = input.files;
var file = filesToUpload[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) img.src = e.target.result
reader.readAsDataURL(file);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
if (width > height)
if (width > MAX_WIDTH)
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
else
if (height > MAX_HEIGHT)
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
//Post dataurl to the server with AJAX上传前调整大小：
html5 Pre-resize images before uploading
【讨论】：
以上是关于如何输入图像并将其用作光标？的主要内容，如果未能解决你的问题，请参考以下文章