111

build/script.js

@@ -0,0 +1,161 @@
+// Generated by CoffeeScript 2.7.0
+(function() {
+  var $, autoRefresh, canvas, dataURItoBlob, drawText, file, generateFileName, graph, image, input, inputItems, makeStyle, readFile, redraw, refresh, textCtx;
+
+  $ = function(sel) {
+    return document.querySelector(sel);
+  };
+
+  inputItems = ['text', 'color', 'alpha', 'angle', 'space', 'size'];
+
+  input = {};
+
+  image = $('#image');
+
+  graph = $('#graph');
+
+  refresh = $('#refresh');
+
+  autoRefresh = $('#auto-refresh');
+
+  file = null;
+
+  canvas = null;
+
+  textCtx = null;
+
+  redraw = null;
+
+  dataURItoBlob = function(dataURI) {
+    var arr, binStr, i, k, len, ref;
+    binStr = atob((dataURI.split(','))[1]);
+    len = binStr.length;
+    arr = new Uint8Array(len);
+    for (i = k = 0, ref = len - 1; (0 <= ref ? k <= ref : k >= ref); i = 0 <= ref ? ++k : --k) {
+      arr[i] = binStr.charCodeAt(i);
+    }
+    return new Blob([arr], {
+      type: 'image/png'
+    });
+  };
+
+  generateFileName = function() {
+    var d, pad;
+    pad = function(n) {
+      if (n < 10) {
+        return '0' + n;
+      } else {
+        return n;
+      }
+    };
+    d = new Date();
+    return '' + d.getFullYear() + '-' + (pad(d.getMonth() + 1)) + '-' + (pad(d.getDate())) + ' ' + (pad(d.getHours())) + (pad(d.getMinutes())) + (pad(d.getSeconds())) + '.png';
+  };
+
+  readFile = function() {
+    var fileReader;
+    if (file == null) {
+      return;
+    }
+    fileReader = new FileReader();
+    fileReader.onload = function() {
+      var img;
+      img = new Image();
+      img.onload = function() {
+        var ctx;
+        canvas = document.createElement('canvas');
+        canvas.width = img.width;
+        canvas.height = img.height;
+        textCtx = null;
+        ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0);
+        redraw = function() {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          return ctx.drawImage(img, 0, 0);
+        };
+        drawText();
+        graph.innerHTML = '';
+        graph.appendChild(canvas);
+        return canvas.addEventListener('click', function() {
+          var blob, imageData, link;
+          link = document.createElement('a');
+          link.download = generateFileName();
+          imageData = canvas.toDataURL('image/png');
+          blob = dataURItoBlob(imageData);
+          link.href = URL.createObjectURL(blob);
+          graph.appendChild(link);
+          return setTimeout(function() {
+            link.click();
+            return graph.removeChild(link);
+          }, 100);
+        });
+      };
+      return img.src = fileReader.result;
+    };
+    return fileReader.readAsDataURL(file);
+  };
+
+  makeStyle = function() {
+    var match;
+    match = input.color.value.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+    return 'rgba(' + (parseInt(match[1], 16)) + ',' + (parseInt(match[2], 16)) + ',' + (parseInt(match[3], 16)) + ',' + input.alpha.value + ')';
+  };
+
+  drawText = function() {
+    var i, j, k, l, margin, ref, ref1, ref2, ref3, step, textSize, width, x, y;
+    if (canvas == null) {
+      return;
+    }
+    textSize = input.size.value * Math.max(15, (Math.min(canvas.width, canvas.height)) / 25);
+    if (textCtx != null) {
+      redraw();
+    } else {
+      textCtx = canvas.getContext('2d');
+    }
+    textCtx.save();
+    textCtx.translate(canvas.width / 2, canvas.height / 2);
+    textCtx.rotate(input.angle.value * Math.PI / 180);
+    textCtx.fillStyle = makeStyle();
+    textCtx.font = 'bold ' + textSize + 'px -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif';
+    width = (textCtx.measureText(input.text.value)).width;
+    step = Math.sqrt((Math.pow(canvas.width, 2)) + (Math.pow(canvas.height, 2)));
+    margin = (textCtx.measureText('啊')).width;
+    x = Math.ceil(step / (width + margin));
+    y = Math.ceil((step / (input.space.value * textSize)) / 2);
+    for (i = k = ref = -x, ref1 = x; (ref <= ref1 ? k <= ref1 : k >= ref1); i = ref <= ref1 ? ++k : --k) {
+      for (j = l = ref2 = -y, ref3 = y; (ref2 <= ref3 ? l <= ref3 : l >= ref3); j = ref2 <= ref3 ? ++l : --l) {
+        textCtx.fillText(input.text.value, (width + margin) * i, input.space.value * textSize * j);
+      }
+    }
+    textCtx.restore();
+  };
+
+  image.addEventListener('change', function() {
+    var ref;
+    file = this.files[0];
+    if ((ref = file.type) !== 'image/png' && ref !== 'image/jpeg' && ref !== 'image/gif') {
+      return alert('仅支持 png, jpg, gif 图片格式');
+    }
+    return readFile();
+  });
+
+  inputItems.forEach(function(item) {
+    var el;
+    el = $('#' + item);
+    input[item] = el;
+    autoRefresh.addEventListener('change', function() {
+      if (this.checked) {
+        return refresh.setAttribute('disabled', 'disabled');
+      } else {
+        return refresh.removeAttribute('disabled');
+      }
+    });
+    el.addEventListener('input', function() {
+      if (autoRefresh.checked) {
+        return drawText();
+      }
+    });
+    return refresh.addEventListener('click', drawText);
+  });
+
+}).call(this);