Błąd "SecurityError: The operation is insecure."

1

Cześć,

piszę aplikacje w js mająca zamieniać zdjęcia zdjęcie na sepię. Napisałem cały kod:

<!DOCTYPE html>
<html>
<head>
    <title>Lab 2</title>
</head>
<body>
  <canvas id="myCanvas" width="616" height="1392" style="border:1px solid black;">
  </canvas>

  <script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      let image1 = new Image()
      let image2 = new Image()
      let image3 = new Image()

      image1.onload = function()
      {
          ctx.drawImage(this, 0, 0)
      }

      image2.onload = function()
      {
          image1.crossOrigin = "anonymous"
          try
          {
            var sourceWidth = this.width;
            var sourceHeight = this.height;
            var destX = c.width / 2 - sourceWidth / 2;
            var destY = c.height / 2 - sourceHeight / 2;
            var sourceX = destX;
            var sourceY = destY;
            ctx.drawImage(this, destX, destY);
            var imageData = ctx.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
            var data = imageData.data;
            for (var i = 0; i < data.length; i += 4) {
                var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 *
                data[i + 2];
                data[i] = brightness;
                data[i + 1] = brightness;
                data[i + 2] = brightness;
            }
            ctx.putImageData(imageData, destX, destY);
        }
        catch (e)
        {
            alert(e)
        }
      }

      image1.src="photo1.jpg"
      image2.src="photo1.jpg"
  </script>
</body>
</html>

W wyniku otrzymuję następujący błąd:
screenshot-20221128201058.png
Jak w js zabezpieczyć tą operację?

1

Działanie na pikselach w ten sposób (albo jakaś inna operacja, którą wykonujesz) zdaje się nie działa na file:// (chodzi chyba o to, że jak masz jakiś obrazek z ustawionym src, to że nie możesz na nim działać w taki sposób, bo cross origin się włącza. Jeśli czegoś nie pokręciłem. na MDN powinni to dokładniej wytłumaczyć).

Czyli najprościej to obejść po prostu stawiając sobie jakiś lokalny serwer na localhoście i łączyć się przez http://
jeśli masz pythona, to:
python3 -m http.server

a potem w przeglądarce localhost:8000

2

Tak jak mówi @LukeJL, nie możesz z poziomu JS'a operować na systemie plików klienta (możesz sobie wyobrazić szkody jakie potencjalne strony mogłyby narobić, gdyby to było możliwe).

Dwie opcje jakie masz:

  • dodać backend do swojej aplikacji, że aplikacja najpierw czytuje zdjęcie (np do pythona), przerabia, i potem odsyła
  • albo odpalić aplikację na localhost tak jak mówi @LukeJL ale to trzeba by sprawdzić, czy faktycznie to zadziała.
2

Nie możesz sobie czytać plików z dysku usera ot tak bez pozwolenia znając tylko ich nazwę. Dostęp do pliku możesz uzyskać po przeciągnięciu pliku przez usera i dobraniu się do niego przez drag&drop api albo przez wybranie pliku przez usera w <input type="file">

1 użytkowników online, w tym zalogowanych: 0, gości: 1