Javascriptで画像を分割してシャッフルする

2017年8月16日2020年12月10日

HTML5のcanvasとJavascriptを使って画像データを9つのブロックに分割し、ブロックをシャッフルして表示してみる。

[rtoc_mokuji title=”” title_display=”” heading=”h3″ list_h2_type=”” list_h3_type=”” display=”” frame_design=”” animation=””]

画像を分割してシャッフル表示

シャッフル前

シャッフル後

ソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像を分割してシャッフル表示</title>
<script type="text/javascript">

function resize(x, y) {
  document.orig.width = x;
  document.orig.height = y;
}

function shuffleArray(array) {
  var n = array.length, t, i;

  while (n) {
    i = Math.floor(Math.random() * n--);
    t = array[n];
    array[n] = array[i];
    array[i] = t;
  }

  return array;
}

function shuffle() {
  //描画コンテキストの取得
  var canvas = document.getElementById('c');
  
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillRect(0, 0, 300, 300);
    
    var img = new Image();
    img.src = "http://freesozai.jp/sozai/roadsign/img/rds_001/1.png";
    
    img.onload = function() {
      img.width = 300;
      img.height = 300;
      var xmax = 3;
      var ymax = 3;
      var width = 300/xmax;
      var height = 300/ymax;
      var width0 = img.width / xmax;
      var height0 = img.height / ymax;
      var ary = [];
      var cnt = 0;
  
      for(var i = 0; i < xmax; i++){
        for(var j = 0; j < ymax; j++){
          ary[cnt++] = [i,j];
        }
      }
      
      ary = shuffleArray(ary);
      
      for(var i = 0; i < xmax; i++){
        for(var j = 0; j < ymax; j++){
          cnt--;
          var x = ary[cnt][0];
          var y = ary[cnt][1];
          ctx.drawImage(img, width0 * x, height0 * y, width0, height0, width * i, height * j, width, height);
        }
      }
      
    }
  }
}
</script>
</head>
<body onLoad="shuffle()">
  <h4>シャッフル前</h4>
  <div><img src="http://freesozai.jp/sozai/roadsign/img/rds_001/1.png" name="orig" onload="resize(300,300)"></img></div>
  <h4>シャッフル後</h4>
  <canvas id="c" style="background-color:white;" width=300 height=300></canvas>
  
  <p></p>
  <input type="button" value="Shuffle" onclick="shuffle()">
</body>
</html>