<div id="info" class="info">选择一张图片到方框里</div>
  <input type="file" accept='.jpg,.png,.jpeg' id="imgInput" />
  <div id="preview-row">
    <canvas id="myCanvas" class="myCanvas" height="300px" width="300px"></canvas>
    <canvas id="c1" class="result" height="300px" width="300px"></canvas>
    <canvas id="c2" class="result" height="300px" width="300px"></canvas>
    <canvas id="c3" class="result" height="300px" width="300px"></canvas>
  </div>

    .preview-row{
      display: flex;
    }
    .myCanvas {
      width: 150px;height: 150px;
      background-color: #9ccbc1;
      border: 2px solid #58a797;
    }
    .result {
      width: 150px;height: 150px;
      background-color: #ffffff;
      border: 2px solid #dddddd;
      opacity: 0;
    }
    .info {
      margin-bottom: 16px;
    }

    var x = new Array();
    var y = new Array();
    var slctclr = new Array();
    var i = 0;
    var canvas = document.getElementById("myCanvas");
    var info = document.getElementById("info");
    var ctx = canvas.getContext("2d");
    var c1 = document.getElementById("c1");
    var c1ctx1 = c1.getContext("2d");
    var c2 = document.getElementById("c2");
    var c1ctx2 = c2.getContext("2d");
    var c3 = document.getElementById("c3");
    var c1ctx3 = c3.getContext("2d");
    var picdrag = 0;
    var j = 0;
    var intx;

    var lastcolor;
    var lastresult = 0;

    console.log('init bayes')
      // 获取DOM元素对象  
    var target = document.getElementById("myCanvas");
    var imgInput = document.getElementById("imgInput");

    imgInput.addEventListener("change", e => {
      if (imgInput.files[0]) loadImage(imgInput.files[0])
      imgInput.style.display = 'none'
    });

    // 渲染  
    function render(src) {
      var image = new Image();
      image.onload = () =>{
        if (image.height > 300) {
          // 宽度等比例缩放
          image.width = 300;
          image.height = 300;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height); 
        info.innerHTML = '点击图片任意位置标记一个像素颜色'
        // 将图像绘制到canvas上  
        ctx.drawImage(image, 0, 0, 300, 300);
        picdrag = 1;

      };
      image.src = src;
    };

    // 加载 图像文件  
    function loadImage(src) {
      // 过滤掉 非 image 类型的文件  
      if (!src.type.match(/image.*/)) {
        if (window.console) {
          console.log("选择的文件类型不是图片: ", src.type);
        } else {
          window.confirm("只能选择图片文件");
        }
        return;
      }
      var reader = new FileReader();
      reader.onload = function (e) {
        // 调用前面的 render 函数  
        render(e.target.result);
      };
      // 读取文件内容  
      reader.readAsDataURL(src);
    };

    window.addEventListener("DOMContentLoaded", function () {
      init();
    }, false);

    canvas.onmouseup = e => {
      console.log(e)
      if (i <= 2 && picdrag) {
        x[i] = e.offsetX;
        y[i] = e.offsetY;
        info.innerHTML = "标记第" + (i + 2).toString() + "个像素点"
        slctclr[i] = ctx.getImageData(x[i], y[i], 1, 1);
        if (i == 2) classify()
        i++;
      }
    };

    function classify() {
      c1.style.opacity = '1'
      c2.style.opacity = '1'
      c3.style.opacity = '1'
      intx = self.setInterval("clock(j);j++;", 20);
    }


    function clock(j) {

      if (j == canvas.height) { window.clearInterval(intx); }

      for (var k = 1; k < canvas.width; k++) {
        var imgData = ctx.getImageData(k, j, 1, 1);

        if (imgData == lastcolor) { result = lastresult; }
        else { var result = compare(imgData.data[0], imgData.data[1], imgData.data[2]) }

        lastcolor = imgData; //颜色信息存入缓存

        if (result == 1) { c1ctx1.putImageData(imgData, k, j); }
        else if (result == 2) { c1ctx2.putImageData(imgData, k, j); }
        else if (result == 3) { c1ctx3.putImageData(imgData, k, j); }
        else { c1ctx4.putImageData(imgData, k, j); }
        info.innerHTML = (j / parseInt(c1.height)*100).toFixed(2) + "%"
      }
      return;
    }

    function compare(red, green, blue) {

      dist1 = Math.pow((slctclr[0].data[0] - red), 2) + Math.pow((slctclr[0].data[1] - green), 2) + Math.pow((slctclr[0].data[2] - blue), 2);

      dist2 = Math.pow((slctclr[1].data[0] - red), 2) + Math.pow((slctclr[1].data[1] - green), 2) + Math.pow((slctclr[1].data[2] - blue), 2);

      dist3 = Math.pow((slctclr[2].data[0] - red), 2) + Math.pow((slctclr[2].data[1] - green), 2) + Math.pow((slctclr[2].data[2] - blue), 2);

      // dist4 = Math.pow((slctclr[3].data[0] - red), 2) + Math.pow((slctclr[3].data[1] - green), 2) + Math.pow((slctclr[3].data[2] - blue), 2);


      var minresult = Math.min(dist1, dist2, dist3);
      //结果存入缓存，返回结果
      if (minresult == dist1) { lastresult = 1; return 1; }
      else if (minresult == dist2) { lastresult = 2; return 2; }
      else if (minresult == dist3) { lastresult = 3; return 3; }
    }