JSFiddle - React, Tailwind, and code Playground

by Meir Gabay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div>
  <button id="renderButton">
    Render Image
  </button>
  <span id="num">0</span>
</div>

<div>
  <img id="my_image" src="" />
</div>

JavaScript

var cl = new cloudinary.Cloudinary({
  cloud_name: "damper",
  secure: true
});
var app = {
  'cached_images': {},
  'cl_url': '',
  'my_resources': [],
  'chosen_resource': {},
  'my_width': 800,
  'my_height': 800,
  'chosen_url': '',
  'num': 0
}

var getImage = function(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image()

    document.getElementById('my_image').src = "https://www.shopfashionisland.com/images/spinner.gif"
    img.onload = function() {
      resolve(url)
    }
    img.onerror = function() {
      reject(url)
    }
    img.src = url
  })
}


function fetchImages() {
  fetch('https://res.cloudinary.com/damper/image/list/show.json').then(
    function(response) {
      return response.json();
    }).then(function(myjson) {
    myjson.resources.forEach(function(value, index) {
      app.my_resources.push(value);
    });
    if (app.my_resources.length > 0) {
      console.log(app.my_resources);
      app['chosen_resource'] = app.my_resources[0]
    }
  });
}

function renderImage(dom_obj) {
  app.chosen_url = 'v' + app.chosen_resource['version'] + '/' + app.chosen_resource['public_id'];
  app.cl_url = cl.url(app.chosen_url, {
    effect: 'cartoonify',
    gravity: "faces",
    fetch_format: "auto",
    width: app.my_width,
    height: app.my_height,
    crop: "fill"
  });
  console.log(app.cl_url);
  getImage(app.cl_url).then(function(successurl) {
    dom_obj.src = successurl;
  }).catch(function(e) {
    console.log(Error(e));
  })
}

$(document).ready(function() {
  $("#renderButton").click(function() {

    if (app.my_resources[app.num]) {
      app.chosen_resource = app.my_resources[app.num];
      renderImage(document.getElementById('my_image'))
      $('#num').text(app.num)
      app.num++;
    } else {
      app.num = 0;
      app.my_width = app.my_width * 2
      app.my_height = app.my_height * 2
      renderImage(document.getElementById('my_image'))

    }

  })
  fetchImages();
})