c = document.getElementById('textCanvas'),

  imageElem = document.getElementById('image'),

  resultTextArea = document.getElementById('result'),

  resultTextAreaFormatted = document.getElementById('resultFormatted');

​

document.getElementById('download').addEventListener('click', () => {

  var a = document.createElement("a");

  a.href = tCtx.canvas.toDataURL();

  a.download = "message.png";

  document.body.appendChild(a);

  a.click();

  document.body.removeChild(a);

});

​

document.getElementById('text').addEventListener('keyup', function() {

  var lines = this.value.split('\n');

  var maxLine = "";

  lines.forEach(line => {

    if (tCtx.measureText(line).width > tCtx.measureText(maxLine).width) {

      maxLine = line;

    }

  });

  tCtx.canvas.width = tCtx.measureText(maxLine).width;

  tCtx.canvas.height = lines.length * 25;

  drawNoise(tCtx, 0, 0, tCtx.canvas.width, tCtx.canvas.height);

  tCtx.font = "20px Helvetica Neue,Helvetica,Arial,Microsoft JhengHei,sans-serif";

  /* var gradient = tCtx.createLinearGradient(0, 0, c.width, 0);

      gradient.addColorStop("0", "magenta");

      gradient.addColorStop("0.5", "blue");

      gradient.addColorStop("1.0", "red");

      tCtx.fillStyle = gradient; */

  tCtx.fillStyle = '#777777';

  lines.forEach((line, i) => tCtx.fillText(line, 0, 20 + (i * 20)));

  for (var i = 0; i < lines.length; i++)

    tCtx.fillText(lines[i], 0, 20 + (i * 20));

  imageElem.src = tCtx.canvas.toDataURL();

  // console.log(imageElem.src);

}, false);

​

​

​

function drawNoise(ctx, x, y, width, height) {

  const imageData = ctx.createImageData(width, height)

  const buffer32 = new Uint32Array(imageData.data.buffer)

​

  const LE = isLittleEndian();

  // 0xAABBRRGG : 0xRRGGBBAA;

  const black = LE ? 0xFF000000 : 0x000000FF;

  const grey = LE ? 0xFF777777 : 0x777777FF;

  const blue = LE ? 0xFFFF0000 : 0x0000FFFF;

  const red = LE ? 0xFF00FF00 : 0x00FF00FF;

  const green = LE ? 0xFF0000FF : 0xFF0000FF;

  const alpha = LE ? 0x00000000 : 0x00000000;

​

​

  for (let i = 0, len = buffer32.length; i < len; i++) {

    buffer32[i] = Math.random() < 0.8

​

      ?

      alpha :

      Math.random() < 0.9 ? grey :

      Math.random() < 0.5 ? blue :

      Math.random() < 0.5 ? green : red

  }

​

  ctx.putImageData(imageData, x, y)

}

​

function isLittleEndian() {

  const uint8 = new Uint8Array(8);

  const uint32 = new Uint32Array(uint8.buffer);

  uint8[0] = 255;

  return uint32[0] === 0XFF;

}

​

function DataURIToBlob(dataURI) {

  const splitDataURI = dataURI.split(',')

  const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])

  const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

​

  const ia = new Uint8Array(byteString.length)

  for (let i = 0; i < byteString.length; i++)

    ia[i] = byteString.charCodeAt(i)

​

  return new Blob([ia], {

    type: mimeString

  })

}

​

document.getElementById('upload').addEventListener('click', () => {

  const file = DataURIToBlob(imageElem.src)

  let formData = new FormData();

  formData.append('file', file, 'image.png');

  fetch('https://img.eservice-hk.net/api.php?version=2', {

      method: 'POST',

      body: formData

    }).then(response => response.json())

    .then(result => {

      // console.log('Success:', result);

      resultTextArea.value = result.url

      resultTextAreaFormatted.value = '[img]'+result.url+'[/img]'

    })

    .catch(error => {

      // console.error('Error:', error);

    });

});

​

document.getElementById('copyURL').addEventListener('click', () => {

  /* Get the text field */

  var copyText = document.getElementById("result");

​

  /* Select the text field */

  copyText.select(); 

  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

​

  /* Copy the text inside the text field */

  document.execCommand("copy");

​

  /* Alert the copied text */

  alert("Copied the text: " + copyText.value);

});

​

document.getElementById('copyFormattedUrl').addEventListener('click', () => {

  /* Get the text field */

  var copyText = document.getElementById("resultFormatted");

​

  /* Select the text field */

  copyText.select(); 

  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

​

  /* Copy the text inside the text field */

  document.execCommand("copy");

​

  /* Alert the copied text */

  alert("Copied the text: " + copyText.value);

});