1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

(function () {
  var form = document.getElementById("avatarform");
  if (!form) return;
  var file = form.querySelector("input[type=file]");
  var box = form.querySelector(".cropper");
  var canvas = box.querySelector("canvas");
  var range = box.querySelector("input[type=range]");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  var sel = { x: 0, y: 0, size: 0 };
  var scale = 1;
  var drag = null;

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "rgba(0,0,0,0.45)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    var x = sel.x * scale, y = sel.y * scale, s = sel.size * scale;
    ctx.drawImage(img, sel.x, sel.y, sel.size, sel.size, x, y, s, s);
    ctx.strokeStyle = "#fff";
    ctx.lineWidth = 2;
    ctx.strokeRect(x + 1, y + 1, s - 2, s - 2);
    form.x.value = Math.round(sel.x);
    form.y.value = Math.round(sel.y);
    form.size.value = Math.round(sel.size);
  }

  function clamp() {
    sel.size = Math.max(16, Math.min(sel.size, img.width, img.height));
    sel.x = Math.max(0, Math.min(sel.x, img.width - sel.size));
    sel.y = Math.max(0, Math.min(sel.y, img.height - sel.size));
  }

  function resize(size, cx, cy) {
    sel.x = cx - size / 2;
    sel.y = cy - size / 2;
    sel.size = size;
    clamp();
    draw();
  }

  img.onload = function () {
    var w = Math.min(img.width, 480);
    scale = w / img.width;
    canvas.width = w;
    canvas.height = Math.round(img.height * scale);
    var m = Math.min(img.width, img.height);
    sel = { x: (img.width - m) / 2, y: (img.height - m) / 2, size: m };
    range.value = 100;
    box.hidden = false;
    draw();
  };

  file.addEventListener("change", function () {
    if (!file.files[0]) return;
    img.src = URL.createObjectURL(file.files[0]);
  });

  function point(e) {
    var r = canvas.getBoundingClientRect();
    var k = canvas.width / r.width;
    return { x: (e.clientX - r.left) * k / scale, y: (e.clientY - r.top) * k / scale };
  }

  canvas.addEventListener("pointerdown", function (e) {
    var p = point(e);
    drag = { dx: p.x - sel.x, dy: p.y - sel.y };
    canvas.setPointerCapture(e.pointerId);
  });
  canvas.addEventListener("pointermove", function (e) {
    if (!drag) return;
    var p = point(e);
    sel.x = p.x - drag.dx;
    sel.y = p.y - drag.dy;
    clamp();
    draw();
  });
  canvas.addEventListener("pointerup", function () { drag = null; });
  canvas.addEventListener("wheel", function (e) {
    e.preventDefault();
    var m = Math.min(img.width, img.height);
    var next = sel.size * (e.deltaY < 0 ? 1.08 : 0.92);
    resize(next, sel.x + sel.size / 2, sel.y + sel.size / 2);
    range.value = Math.round(sel.size / m * 100);
  }, { passive: false });
  range.addEventListener("input", function () {
    var m = Math.min(img.width, img.height);
    resize(m * range.value / 100, sel.x + sel.size / 2, sel.y + sel.size / 2);
  });
})();