画布图像行为在Safari中正常，但在其他浏览器中则不然

Canvas image behaviour normal in Safari, but not other browsers

本文关键字：其他 浏览器 Safari 布图像 图像      更新时间：2023-09-26

我在Safari中成功地将图像加载到了画布元素中。它的行为正常，我可以按预期在画布上移动它。然而，当在Firefox、Chrome或IE中测试时，图像会加载，但只要我按键移动它，图像就会消失。

我看过谷歌Chrome中没有显示的画布上绘制的图像，认为加速2D功能可能也会导致它无法正确绘制，但这已经被禁用了。我真的不确定是什么原因造成了这个问题？

编辑：我在控制台上也出现了以下错误："未捕获的安全性错误：无法在'CanvasRenderingContext2D'上执行'getImageData'：画布已被交叉源数据污染。checkForCollision drawFrame"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> My title </title>
  </head>
  <h2>Your current time:</h2>
  <h1>
    <label class="timer" id="minutes">00</label>:<label id="seconds">00
     </label>
  </h1>
<body>
  <section>
    <canvas id="canvas"> </canvas>
    <img id="sprite" src="http://i.imgur.com/dudnUyL.png"> 
    <div>
       <h3><button id="resetme" onclick="loadHard()">Reload Maze</button></h3>
    </div>
    <script type="text/javascript">
    var canvas;
    var context;
    var x = 0;
    var y = 0; //positioning of the sprite
    var dx = 0;
    var dy = 0; //momentum of the sprite at start
    window.onload = function() {
     canvas = document.getElementById("canvas");
     context = canvas.getContext("2d");
     //ctx.save();
     drawMaze("http://i.imgur.com/Fbhw8NT.png", 268, 225);
     window.onkeydown = processKey;
   };
   var timer;
   function drawMaze(mazeFile, Xstart, Ystart) {
     clearTimeout(timer);
     dx = 0;
     dy = 0; //if the sprite is already moving, stop it
     var imgMaze = new Image();
     imgMaze.onload = function() {
       canvas.width = imgMaze.width;
       canvas.height = imgMaze.height;
       context.drawImage(imgMaze, 0,0);
       x = Xstart;
       y = Ystart;
      var imgSprite = document.getElementById("sprite");
      context.drawImage(imgSprite, x, y);
      context.stroke();
      timer = setTimeout(drawFrame, 10); 
    };
    imgMaze.src = mazeFile;
  }
  function processKey(e) { //e needs to be used for event handling
    dx = 0;
    dy = 0;
    //condition for the Up arrow being pressed
    if (e.keyCode == 38) {
      dy = -1;
    }
    //condition for the Left arrow being pressed
    if (e.keyCode == 37) {
      dx = -1;
    }
    //condition for the Down arrow being pressed
    if (e.keyCode == 40) {
      dy = 1;
    }
    //condition for the Right arrow being pressed
    if (e.keyCode == 39) {
       dx = 1;
    }
//all of the above numbers from 37-40 are representative of ASCII values
}
function checkForCollision() {
  var imgData = context.getImageData(x-1, y-1, 15+2, 15+2);
  var pixels = imgData.data;
  for (var i = 0; n = pixels.length, i < n; i += 4) {
    var red = pixels[i];
    var green = pixels[i+1];
    var blue = pixels[i+2];
    var alpha = pixels[i+3];
    //now check for the black pixels for a wall
    if (red == 0 && green == 0 && blue == 0) {
      return true;
    } //checks for a greyish colour - possibly the edge of a wall
    if (red == 169 && green == 169 && blue == 169) {
      return true;
    }
  }
  return false; //there was no collision 
}
function drawFrame() { 
  if (dx != 0 || dy != 0) {
    context.beginPath();
    context.fillStyle = "rgb(254,244,207)";
    context.rect(x, y, 15, 15);
    context.fill() 
    x += dx;
    y += dy;
   if (checkForCollision()) { 
      x -= dx;
      y -= dy;
      dx = 0;
      dy = 0;
   }

   var imgSprite = document.getElementById("sprite");
   context.drawImage(imgSprite, x, y);

   if (y > (canvas.height - 17)) {
     alert("You succeeded - hooray! That, or Pi's done..");
     clearInterval(timeout);
     minutesLabel.innerHTML = secondsLabel.innerHTML = "00";
     location.reload();
     return;
   }
 }
  timer = setTimeout(drawFrame, 10);
  }
  function loadHard() {
    drawMaze('http://i.imgur.com/Fbhw8NT.png', 268, 225);
    console.log('idle');
    totalSeconds = -1;
    setTime();
  }
 //just some more JS code about a timer 
</script>
</section>
</body>
</html>

这似乎是大多数浏览器都会检查的安全问题。如何修复getImageData（）错误画布已被跨原点数据污染？

这导致JavaScript错误，导致页面无法工作。我可以通过在将所有图像加载到画布之前将其转换为DataURL来实现这一点，但您可能需要尝试上面链接中的一些其他建议。

相关文章：