JSFiddle - React, Tailwind, and code Playground

by ilyador

HTML

<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)

  var xhr = new XMLHttpRequest();
  xhr.open( 'POST', 'https://graph.facebook.com/me/photos', true )
  xhr.onload = xhr.onerror = function() {
    console.log( xhr.responseText )
  };
  xhr.send( formData )
}

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' });
}