1

200x200 の宝石の画像がたくさんある作業用のスクリプトを書いています。スクリプトはページ上のすべての画像を取得してキャンバスを作成し、エッジのピクセルの変色をチェックします (本来は純粋な白) 正しく編集されていないためです。

私は正確さのために左上隅と右上隅をチェックすることから始めましたが、今ではネックレスの一部または何かが隅や側面から離れてしまう可能性があるアイテムに遭遇しており、これがこれを不正確にしています.

これについてどうすればいいですか？私が今行っているのは、rgba 値の合計が両方のピクセルで 1020 であるかどうかを確認することです。そうでない場合、画像は純粋な白ではありません。

画像には 2 つの欠陥が考えられます。背景全体の変色とエッジの周りの灰色の境界線です。隅のピクセルをチェックすると、灰色の境界線に対しては機能しますが、アイテムが隅/側面にまで及ぶ場合、背景には機能しません。

4

1 に答える 1

1

画像の四隅すべてを確認してください。4 つのコーナーのうち少なくとも 1 つが であるwhite / 255,255,255 / #FFFFFF場合、画像はおそらく問題ありません。（変色は画像全体で一貫しているはずですよね？）

それ以外に、変色をチェックするためにできることはあまりありません。ただし、画像内の色を数えて、最も多く発生する色が実際に白かどうかを確認できます。

<canvas id="canvas" width="300px" height="300px"></canvas>

var canvas = document.getElementById("canvas"),
    canvasWidth = canvas.width,
    canvasHeight = canvas.height,
    c = canvas.getContext("2d"),
    img = new Image();

img.src = '/images/favicon.png';
img.onload = drawImage;

function drawImage(){
  // Prepare the canvas
  var ptrn = c.createPattern(img, 'repeat'); 
  c.fillStyle = "white";
  c.fillRect(0,0,canvasWidth,canvasHeight);
  c.fillStyle = ptrn;
  c.fillRect(0,0,canvasWidth,canvasHeight);

  // Get img data
  var imgData = c.getImageData(0, 0, canvasWidth, canvasHeight),
      data = imgData.data,
      colours = {};

  // Build an object with colour data.
  for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
      var index = (y * canvasWidth + x) * 4,
          r = data[index],   // Red
          g = data[++index], // Green
          b = data[++index], // Blue
      //  a = data[++index], // Alpha
          rgb = rgbToHex(r,g,b);

      if(colours[rgb]){
        colours[rgb]++;
      }else{
        colours[rgb] = 1;
      }
    }
  }

  // Determine what colour occurs most.
  var most = {
    colour:'',
    amount:0
  };
  for(var colour in colours){
    if(colours[colour] > most.amount){
      most.amount = colours[colour];
      most.colour = colour;
    }
  }
  console.log("Highest occurence:",most,
              "\nColours:        ",colours);
}

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
于 2013-01-29T08:23:53.703 に答える