canvas upload to imgur

by Ting-Yuan Chang

HTML

<script src="https://cdn.rawgit.com/jondavidjohn/hidpi-canvas-polyfill/1.0.9/dist/hidpi-canvas.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button id='upload' >
upload
</button>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.filter = "blur(0px)";
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
ctx.strokeRect(20,20,150,100);

ctx.moveTo(100,0);
ctx.lineTo(100,150);
ctx.stroke();
document.querySelector('#upload').addEventListener('click', function() {
console.log(c)
  var dataURL = c.toDataURL().split(',')[1];
  var blob = atob(dataURL)
  var formData = new FormData();
  formData.append("image", dataURL);
  $.ajax({
    type: "POST",
    url: "https://api.imgur.com/3/image/",
    headers: {
    'Authorization': 'Client-ID 3129b4c83306ec1'
    },
    data: formData,cache: false,
    contentType: false,
    processData: false
  }).done(function(o) {
    console.log('saved', o); 
  });
})