我正在尝试制作一个程序，用户可以在其中上传地图，并可以覆盖并发现它。我可以设法编写代码以允许用户覆盖地图，但不能发现地图。我正在尝试使用CSS精灵，这些精灵包含一张上传的图像，并使用户能够绘画。由于图片是上传的，因此没有网址，因此无法使用CSS Sprites。有没有一种使用CSS Sprite的方法，还是更简单的方法？ 注意：图像在画布中。
如果显示有帮助，这里是程序：
<!DOCTYPE html>
<html>
<head>
<title>Dungeon Crawler</title>
<style>
#title {
font-variant: small-caps;
font-size: 50px;
}
</style>
</head>
<body>
<h1 id = "title">Dungeon Crawler</h1>
<b id = importMapText> Import Map: </b><span id = "imageLoader"><input type="file" accept="image/*" name="imageLoader"/></span>
<input type="button" id = "back" value="Back" onclick="back()" />
<p>
<span id = "tools"> <select id="coverOrUncover">
<option value="uncover"> Uncover</option>
<option value="cover"> Cover </option>
</select>
the map with a brush size of
<input type="text" value = "50" name = "size" id = "size"> pixels.
</span>
<canvas id="imageCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script>
var vv = document.getElementById("tools");
vv.style.display = "none";
var v = document.getElementById("title");
v.style.display = "block";
var w = document.getElementById("imageCanvas");
w.style.display = "none";
var x = document.getElementById("back");
x.style.display = "none";
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change',handleImage,false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getcontext('2d');
document.getElementById("imageLoader").innerHTML = "<input type=\"file\" name=\"imageLoader\">"
function handleImage(e){
var vv = document.getElementById("tools");
vv.style.display = "block";
var v = document.getElementById("title");
v.style.display = "none";
var w = document.getElementById("imageCanvas");
w.style.display = "block";
document.getElementById("imageLoader").innerHTML = ""
document.getElementById("size").value = "50"
var y = document.getElementById("importMapText");
y.style.display = "none";
var z = document.getElementById("back");
z.style.display = "block";
// ^ shows stuff that need to and hides things that don't
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
// ^ Prints the image to the canvas
}
function back(){
var vv = document.getElementById("tools");
vv.style.display = "none";
var v = document.getElementById("title");
v.style.display = "block";
var w = document.getElementById("imageCanvas");
w.style.display = "none";
document.getElementById("imageLoader").innerHTML = "<input type=\"file\" accept=\"image/*\" name=\"imageLoader\">"
var y = document.getElementById("importMapText");
y.style.display = "block";
var z = document.getElementById("back");
z.style.display = "none";
// ^ shows stuff that need to and hides things that don't
}
</script>
<script>
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(700,400);
frameRate(30);
// ProgramCodeGoesHere
var size = document.getElementById("size").value;
size = parseInt(size,10);
var coverOrUncover = document.getElementById("coverOrUncover").value;
draw = function() {
size = document.getElementById("size").value;
size = parseInt(size,10);
fill(0,0);
noStroke();
rect(mouseX,mouseY,size,size);
};
}};
// Get the canvas that Processing-js will use
var canvas = document.getElementById("imageCanvas");
// Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
var processingInstance = new Processing(canvas,sketchProc);
</script>
</body>
</html>
（抱歉，隐藏和显示HTML元素的某些行很难阅读，我试图使其更清晰，但出现语法错误。）