'slide pixels one space to the left using javascript

I'm trying to slide the pixel of an image left, as if the image was one single array and I move the array 1 position left with wrap around.

i.e. if it was a 4x4 image

1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

as a single array it would become 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

which is then shifted

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1

which results in an image

2 3 4 5

6 7 8 9

10 11 12 13

14 15 16 1

I think I'm moving/addressing the array incorrectly, but can't see where I'm going wrong.

<!DOCTYPE html>
<html>
<body>

<img id="picture" src="img_the_scream.jpg" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
function rotateLeft(arr){
    let first = arr.shift();
    arr.push(first);
    return arr;
}

document.getElementById("picture").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("picture");
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, c.width, c.height);
  // move pixels
  var i;
  for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i] =  rotateLeft(imgData.data[i]);    //R
    imgData.data[i+1] = rotateLeft(imgData.data[i+1]); //G
    imgData.data[i+2] = rotateLeft(imgData.data[i+2]); //B
    imgData.data[i+3] = 255; //A
  }
  ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
</html>

even if I directly modify the array, it shifts the entire image to the left, not sliding the pixels to 'wrap around' onto the next line

<!DOCTYPE html>
<html>
<body>

<img id="picture" src="img_the_scream.jpg" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

document.getElementById("picture").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("picture");
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, c.width, c.height);
  // move pixels
  var i;
  offset=10;
  for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i] =  (imgData.data[i+4*offset]);
    imgData.data[i+1] = (imgData.data[i+1+4*offset]);
    imgData.data[i+2] = (imgData.data[i+2+4*offset]);
    imgData.data[i+3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
</html>
javascripthtmlcsshtml5-canvas.netunit-testingdevopscicd


Solution 1:[1]

<!DOCTYPE html>
<html>
<body>

<img id="picture" src="test1.jpeg" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>



</body>
<script>
function rotateLeft(arr){
  console.log(arr);
    let first = arr.shift();
    arr.push(first);
    return arr;
}

document.getElementById("picture").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("picture");
  ctx.drawImage(img, 0, 0, c.width, c.height);
  var imgData = ctx.getImageData(0, 0, c.width, c.height);
  offset=10;
  for (let i = 0; i < imgData.data.length; i += 16) {
    imgData.data[i] =  (imgData.data[i+4*offset]);
    imgData.data[i+1] = (imgData.data[i+1+4*offset]);
    imgData.data[i+2] = (imgData.data[i+2+4*offset]);
    imgData.data[i+3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};
</script>
</html

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman

Related Questions