이미지를 타일로 나누는 방법은 무엇입니까?

Question

나는 다음과 같은 작업을 달성 할 수 있습니다

은 타일로 이미지를 분할 각 타일의 평균 색상을 계산을 는 색상의 서버에서 타일을 가져, 그리고 포토 모자이크로 결과를 합성한다 원본 이미지.

최상의 전략은 무엇입니까? 제 첫 번째 해결책은 캔버스를 사용하는 것입니다.

Answer 1

픽셀 데이터를 얻고 타일 방법을 찾는 간단한 방법입니다. 코드는 타일 수로 나눌 수있는 크기가없는 이미지를 더 많이 검사해야합니다.

var image = new Image(); 
image.src = ??? // the URL if the image is not from your domain you will have to move it to your server first 

// wait for image to load 
image.onload = function(){ 
    // create a canvas 
    var canvas = document.createElement("canvas"); 
    //set its size to match the image 
    canvas.width = this.width; 
    canvas.height = this.height; 
    var ctx = canvas.getContext("2d"); // get the 2d interface 
    // draw the image on the canvas 
    ctx.drawImage(this,0,0); 
    // get the tile size 
    var tileSizeX = Math.floor(this.width/10); 
    var tileSizeY = Math.floor(this.height/10); 
    var x,y; 
    // array to hold tile colours 
    var tileColours = []; 
    // for each tile 
    for(y = 0; y < this.height; y += tileSizeY){ 
     for(x = 0; x < this.width; x += tileSizeX){ 
      // get the pixel data 
      var imgData = ctx.getImageData(x,y,tileSizeX,tileSizeY); 
      var r,g,b,ind; 
      var i = tileSizeY * tileSizeX; // get pixel count 
      ind = r = g = b = 0; 
      // for each pixel (rgba 8 bits each) 
      while(i > 0){ 
       // sum the channels 
       r += imgData.data[ind++]; 
       g += imgData.data[ind++]; 
       b += imgData.data[ind++]; 
       ind ++; 
       i --; 
      } 
      i = ind /4; // get the count again 
      // calculate channel means 
      r /= i; 
      g /= i; 
      b /= i; 
      //store the tile coords and colour 
      tileColours[tileColours.length] = { 
       rgb : [r,g,b], 
       x : x, 
       y : y, 
      } 
     } 
     // all done now fetch the images for the found tiles. 
    } 

Answer 2

나는 (내가 백 엔드에서 타일 이미지를 받고 있지 않다) 이것에 대한 솔루션을 개발

// first function call to create photomosaic 
    function photomosaic(image) { 

     // Dimensions of each tile 
     var tileWidth = TILE_WIDTH; 
     var tileHeight = TILE_HEIGHT; 

     //creating the canvas for photomosaic 
     var canvas = document.createElement('canvas'); 
     var context = canvas.getContext("2d"); 
     canvas.height = image.height; 
     canvas.width = image.width; 

     var imageData = context.getImageData(0, 0, image.width, image.height); 
     var pixels = imageData.data; 

     // Number of mosaic tiles 
     var numTileRows = image.width/tileWidth; 
     var numTileCols = image.height/tileHeight; 


     //canvas copy of image 
     var imageCanvas = document.createElement('canvas'); 
     var imageCanvasContext = canvas.getContext('2d'); 
     imageCanvas.height = image.height; 
     imageCanvas.width = image.width; 
     imageCanvasContext.drawImage(image, 0, 0); 


     //function for finding the average color 
     function averageColor(row, column) { 
      var blockSize = 1, // we can set how many pixels to skip 

       data, width, height, 
       i = -4, 
       length, 
       rgb = { 
        r: 0, 
        g: 0, 
        b: 0 
       }, 
       count = 0;   

      try { 
       data = imageCanvasContext.getImageData(column * TILE_WIDTH, row * TILE_HEIGHT, TILE_HEIGHT, TILE_WIDTH); 
      } catch (e) { 
       alert('Not happening this time!'); 
       return rgb; 
      } 

      length = data.data.length; 

      while ((i += blockSize * 4) < length) { 
       ++count; 
       rgb.r += data.data[i]; 
       rgb.g += data.data[i + 1]; 
       rgb.b += data.data[i + 2]; 
      } 

      // ~~ used to floor values 
      rgb.r = ~~(rgb.r/count); 
      rgb.g = ~~(rgb.g/count); 
      rgb.b = ~~(rgb.b/count); 

      return rgb; 

     } 

     // Loop through each tile 
     for (var r = 0; r < numTileRows; r++) { 
      for (var c = 0; c < numTileCols; c++) { 
       // Set the pixel values for each tile 
       var rgb = averageColor(r, c) 
       var red = rgb.r; 
       var green = rgb.g; 
       var blue = rgb.b; 

       // Loop through each tile pixel 
       for (var tr = 0; tr < tileHeight; tr++) { 
        for (var tc = 0; tc < tileWidth; tc++) { 

         // Calculate the true position of the tile pixel 
         var trueRow = (r * tileHeight) + tr; 
         var trueCol = (c * tileWidth) + tc; 

         // Calculate the position of the current pixel in the array 
         var pos = (trueRow * (imageData.width * 4)) + (trueCol * 4); 

         // Assign the colour to each pixel 
         pixels[pos + 0] = red; 
         pixels[pos + 1] = green; 
         pixels[pos + 2] = blue; 
         pixels[pos + 3] = 255; 
        }; 
       }; 
      }; 
     }; 

     // Draw image data to the canvas 
     context.putImageData(imageData, 0, 0); 
     return canvas; 
    } 

    function create() { 
     var image = document.getElementById('image'); 
     var canvas = photomosaic(image); 
     document.getElementById("output").appendChild(canvas); 
    }; 

DEMO : https://jsfiddle.net/gurinderiitr/sx735L5n/

Answer 3

픽셀 색을 읽을 자바 스크립트 라이브러리 날씬한를 사용해보십시오 이미지를 수정하기 위해 반전, 표준화 또는 유사한 속성을 사용하십시오.

는 날씬한 라이브러리에 보라 https://github.com/oliver-moran/jimp