JSFiddle - React, Tailwind, and code Playground

by kwikwag

JavaScript

window.URL = window.URL || window.webkitURL;
window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder;

function convertDataStringToBlob(data, mimetype) { 
    var len = data.length; 
    var uInt8Array = new Uint8Array(len); 
    for (var i = 0; i < len; ++i) { 
        uInt8Array[i] = data.charCodeAt(i) & 0xff; 
    } 
    var bb = new window.BlobBuilder(); 
    bb.append(uInt8Array.buffer); 
    return bb.getBlob(mimetype); 
}
function convertDataURIToBlob(dataURI) { 
  var BASE64_MARKER = ';base64,'; 
  var base64Index = dataURI.indexOf(BASE64_MARKER); 
  var base64 = dataURI.substring(base64Index + BASE64_MARKER.length);
  var mimetype = dataURI.substring(0, base64Index);
  var data = window.atob(base64); 
  return convertDataStringToBlob(data, mimetype);
} 
function canvasToBlob(canvas, mimetype, q) {
    if (canvas.toBlob) {
        return canvas.toBlob(mimetype,q);
    }
    else {
        var dataUrl = canvas.toDataURL(mimetype, q);
        return convertDataURIToBlob(dataUrl);
    }
}
function imgToCanvas(img) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext("2d");
    context.drawImage(img, 0, 0);
    return canvas;
}
var getImageAsBlob = function (url, method, cb) {
    switch (method) {
        case "gmxhr":
            GM_xmlhttpRequest({
              method: "GET",
              url: url,
              overrideMimeType: 'text/plain; charset=x-user-defined',
              onload: function(response) {
                    var responseType = 'image/jpeg'; // TODO : extrect from response headers
                    var blob = convertDataStringToBlob(response.responseText, responseType);
                    cb(blob);
                }
            });
            break;
        case "xhr":
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            
            if (/webkit/i.test(navigator.userAgent)) {
 ...