JavaScript ile 2 Resim Arasındaki Farkı Bul

Dergi ve gazetelerin bilmece sayfalarında yer alan ve fazlasıyla dikkat isteyen “İki resim arasındaki 7 farkı bulun” türü bulmacaları hatırlar mısınız? Genellikle kısa bir göz gezdirmeyle 6 fark bulunur ancak her halükarda sonuncusu biraz uğraştırırdı.

Psikoloji bilimi bu bulmacaları, özellikle çocuklarda dikkat ve algıyı yönetme açısından faydalı göstermekte.

Bu makalemizde, seçtiğimiz iki resim arasındaki farkları JavaScript ile saniyeler içerisinde bulan bir kod öbeği paylaşacağız.

ÖRNEĞİ GÖRÜNTÜLE

jQuery desteğiyle 2 resim arasındaki farkları bulun

İşin büyük bir kısmı pure JavaScript ile yapılsa da bu yapının özellikle input öğelerindeki değişimler jQuery ile anlık olarak takip edilebilmekte. O yüzden Adobewordpress kategorileri arasındaki en uygun yeri jQuery kategorisi diye düşündük.

Bu kodlama Jonas Grumann tarafından 22 Ekim 2014 tarihinde hazırlandı.

Hazırsanız başlayalım.

HTML Kodları

İki adet upload inputuna ihtiyacımız olacak. Beraberinde de sonuçları göstereceğimiz alanları da hazırlayalım.

<div class="uploaders">
  <h2>Resim Yükle</h2>
  <div class="inputs">
    <input type="file" id="original" /><br/>
    <input type="file" id="modified" />
  </div>
</div>
<div class="output">
  <h2>Çıktılar</h2>
  <div class="canvases">
  </div>
</div>

JavaScript Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Jonas tarafından hazırlanan JavaScript kodları şöyle :

var FindDifferences = function() {
  var original_canvas, modified_canvas, original_ctx, modified_ctx;
  var has_original_image = false;
  var has_modified_image = false;

  this.init = function() {
    var self = this;
    $("#original").change(function(){
      self.upload(this, 'original');
    });
    $("#modified").change(function(){
      self.upload(this, 'modified');
    });
  }

  this.upload = function(input, canvas_name) {
    var self = this;
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      var image_width = 0;
      var image_height = 0;

      reader.onload = function (e) {
        //$('#blah').attr('src', e.target.result);
        var image = new Image();
        image.src = e.target.result;
        image.onload = function() {
          image_width = this.width;
          image_height = this.height;

          if (canvas_name == 'original') {
            var id = "original_canvas";
            original_canvas = document.createElement('canvas');
            original_canvas.id = "original_canvas";
            original_canvas.width = image_width;
            original_canvas.height = image_height;
            original_ctx = original_canvas.getContext("2d");
            original_ctx.drawImage(image, 0, 0);
            document.querySelectorAll(".canvases")[0].appendChild(original_canvas);
            has_original_image = true;
          } else {
            modified_canvas = document.createElement('canvas');
            modified_canvas.id = "modified_canvas";
            modified_canvas.width = image_width;
            modified_canvas.height = image_height;
            modified_ctx = modified_canvas.getContext("2d");
            modified_ctx.drawImage(image, 0, 0);
            modified_ctx.fillStyle = "red";
            document.querySelectorAll(".canvases")[0].appendChild(modified_canvas);
            has_modified_image = true;
          }

          if (has_original_image && has_modified_image) {
            self.go();
          }
        }
      }

      reader.readAsDataURL(input.files[0]);
    }
  }

  this.go = function() {
    var original_data = original_ctx.getImageData(0, 0, original_canvas.width, original_canvas.height).data;
    var modified_data = modified_ctx.getImageData(0, 0, original_canvas.width, original_canvas.height).data;

    var errors = this.checkData(original_data, modified_data);
    this.drawErrors(errors);
  }

  this.checkData = function(arr_1, arr_2) {
    var errors = [];
    for (var i=0, l=arr_1.length; i < l; i+=4) {
      if(arr_1[i] - arr_2[i] > 30 || arr_1[i] - arr_2[i] < -30) {
        errors.push(i);
      }
    }
    return errors;
  }

  this.drawErrors = function( errors ) {
    for (var i = 0, l = errors.length; i < l; i++) {
      var ce = errors[i] / 4;
      var posX = ce % original_canvas.width;
      var posY = (Math.floor(ce / original_canvas.width) * original_canvas.width) / original_canvas.width;
      modified_ctx.fillRect(posX, posY, 1, 1);
    }
  }

  this.init();
}

var finDifferences = new FindDifferences();

Bitirmeden…

Adobewordpress olarak eğlenceli konuları da ele almayı, yapılmış uygulamaları sizlerle paylaşmayı arzuluyoruz. Bu yüzden ilginizi çekebileceğini düşündüğümüz her türden web yazılımını makalelerimizde ele almaktayız. Eğer sizlerin de önerdiği, beğendiği veya bir şekilde Adobewordpress’te görmek istediği yazılımlar varsa bunları bizimle yorum alanında paylaşabilirsiniz.

İyi çalışmalar.