CODEWITHSUNDEEP
javascriptimagegoogle-chromeimage-processinghtml5-canvas
user4157770
user4157770

Reputation:

Chrome not rendering canvas data as expected [JS/Canvas API]

I have a function which I have altered from an answer on codegolf (since the original answer didn't actually work).

Basically all it does is takes the pixels of an image, scrambles them up and then outputs the scrambled image onto the page.

Here is my code as it stands:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    img {
      min-width: 500px;
      min-height: 500px;
    }
  </style>
</head>

<body>
  <img src="test.jpg" alt="" />
  <script>
    function scramble(el) {
      "use strict";
      var V = document.createElement('canvas');
      var W = V.width = el.width,
        H = V.height = el.height,
        C = V.getContext('2d');

      C.drawImage(el, 0, 0);

      var id = C.getImageData(0, 0, W, H),
        D = id.data,
        L = D.length,
        i = L / 4,
        A = [];

      for (; --i;) A[i] = i;

      function S(A) {
        var L = A.length,
          x = L >> 3,
          y, t, i = 0,
          s = [];

        if (L < 8) return A;

        for (; i < L; i += x) s[i / x] = S(A.slice(i, i + x));

        for (i = 4; --i;) y = [6, 4, 7, 5, 1, 3, 0, 2][i], t = s[i], s[i] = s[y], s[y] = t;

        s = [].concat.apply([], s);

        return s;
      }
      var N = C.createImageData(W, H),
        d = N.data,
        A = S(A);

      for (var i = 0; i < L; i++) d[i] = D[(A[i >> 2] * 4) + (i % 4)];

      C.putImageData(N, 0, 0);

      el.src = C.canvas.toDataURL("image/jpeg", 1.0);
    }

    scramble(document.querySelector("img"));
  </script>
</body>

</html>

Now, the issue is with chrome, unlike FF, Edge and IE, which all display as expected, chrome just shows a black square where the image should be.

I can't for the life of me figure out why, especially since all the other browsers work as expected.

Here is a screenshot of the other browsers showing fine and chrome with the black square.

enter image description here

As you can see, all of the other browsers are fine, chrome however just doesn't do as expected, nor does it throw any console errors or have any visible telltale reason for not working which is frustrating.

Anyway, any questions, ask below in the comments.

Upvotes: 1

Views: 176

Answers (2)

guest271314
guest271314

Reputation: 1

Try calling scramble at load event of <img> element

document.querySelector("img").onload = function() {
   scramble(this)
};

Upvotes: 1

ITManager
ITManager

Reputation: 1

The code provided document.querySelector("img").onload = function() { scramble(this) }; makes the image scramble and unscramble very rapidly. It does not create a static scrambled rendering. Furthermore, the absence of the code leaves Chrome displaying the static form of the original unscrambled image.

Upvotes: 0

Related Questions