getImageData () не работает во всех браузерах, но работает непосредственно в w3schools - PullRequest
Новая
       46

getImageData () не работает во всех браузерах, но работает непосредственно в w3schools

0 голосов
/ 24 февраля 2019

Я работал над дизайном футболки, требуя от меня нарисовать фигуру на холсте после того, как я использовал drawImage (), чтобы поместить изображение на холст.Тем не менее, я не смог заставить getImageData () работать, если я добавил изображение на холст через drawImage.После двух дней я сдался и пошел в школу.Странно то, что код работает, когда написан непосредственно в w3schools, но НЕ в документе, который я генерирую на своем жестком диске.Затем я попытался загрузить файл на свой сервер, и он все еще не работает.Вот код, который я сгенерировал в w3schools, а затем скопировал и вставил на мой жесткий диск.

Вот URL, с которого я работал в w3schools (просто скопируйте и вставьте приведенный ниже код в w3schools, чтобы показать, что он работает): https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage

В школах на холсте цифры «84,73,71,255» написаны большими белыми буквами.На моем жестком диске и на моем сервере (1and1.com) этого не происходит.

Я также попробовал некоторые другие фрагменты кода, например, использование getImageData для создания негативного изображения.Это тоже не сработало. 

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" width="220" height="277" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
  var d = ctx.getImageData(100,100,1,1);
  d = d.data;
  ctx.fillStyle = "white";
  ctx.font = "30px Arial";
  ctx.fillText(d,20,200);
}
</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>
...