JSFiddle - React, Tailwind, and code Playground

by ilyador

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>
<button id="upload">FB Upload</button>

JavaScript

var token = "";

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var uploadButton = document.getElementById("upload");
var img = new Image()

img.crossOrigin = 'Anonymous'
img.src = "http://lorempixel.com/300/300/cats/"
img.onload = function(){ ctx.drawImage(img, 0, 0) }

uploadButton.addEventListener('click', function () {
	fbUpload(token)
})

function fbUpload(token){
  var dataURL = canvas.toDataURL('image/jpeg', 1.0)
  var blob = dataURItoBlob(dataURL)
  var formData = new FormData()
  formData.append('access_token', token)
  formData.append('source', blob)

  $.ajax({
    url: "https://graph.facebook.com/me/photos", 
    type: 'POST',
    data: formData,
    success: function(data) {
      console.log(data);
    }
  });
}

function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); }
  return new Blob([ab], { type: 'image/jpeg' });
}