JSFiddle - React, Tailwind, and code Playground

by Roni Feldsher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-jquery-file-upload/2.3.0/cloudinary-jquery-file-upload.min.js"></script>
Width: <input id="width" type="text" value=2000><br/>
Height: <input id="height" type="text" value= 1335><br/>
Frame public_id: <input id="frame" type="text" value= "M2622058BR"><br/>
Frame size (pixels): <input id="thickness" type="text" value= 96><br/>
Matt 1 public_id: <input id="matt1_pub_id" type="text" value= "B878526"><br/>
Matt 2 public_id: <input id="matt2_pub_id" type="text" value= "B928156"><br/>
Matt 1 size (pixels): <input id="matt1_size" type="text" value= "100"><br/>
Matt 2 size (pixels): <input id="matt2_size" type="text" value= "100"><br/>
Reduce size by factor of: <input id="scale_factor" type="text" value= "4"><br/>
<button>Go</button>


<br /><br />
<!--<img class="reference" src="http://res.cloudinary.com/cloudinary-roni/$width_2000,$height_1335,$thickness_103/c_fill,w_$width,h_$height/l_frame,w_$width,h_$thickness/g_north,fl_layer_apply/l_frame,w_$width,h_$thickness/c_lpad,w_$width,h_$height,g_north/a_180/fl_layer_apply/l_frame,w_$height,h_$thickness/c_lpad,w_$height,h_$width,g_north/a_90/l_triangle,w_$thickness/a_180/g_north_east,e_cut_out,fl_layer_apply/l_triangle,w_$thickness/a_90/g_south_east,e_cut_out,fl_layer_apply/fl_layer_apply/l_frame,w_$height,h_$thickness/c_lpad,h_$width,w_$height,g_north/a_-90/l_triangle,w_$thickness/a_-90/g_north_west,e_cut_out,fl_layer_apply/l_triangle,w_$thickness/g_south_west,e_cut_out,fl_layer_apply/fl_layer_apply/coffee-cup"/>
-->
<div id="preview"></div>

CSS

.reference{
  width: 20%;
}

#new{
  width: 80%;
}
input{
  margin: 3px;
}

JavaScript

$.cloudinary.config({cloud_name: "michaels-stores"});

$('button').click(function(){
	var scale_down=parseInt($('#scale_factor').val());
  var width = Math.round((parseInt($('#width').val()))/scale_down);
  var height = Math.round((parseInt($('#height').val()))/scale_down);
  var frame = $('#frame').val();
  var thickness = Math.round((parseInt($('#thickness').val()))/scale_down);
  var matt1_pub_id = $('#matt1_pub_id').val();
  var matt2_pub_id = $('#matt2_pub_id').val();
  var matt1_size = Math.round((parseInt($('#matt1_size').val()))/scale_down);
  var matt2_size = Math.round((parseInt($('#matt2_size').val()))/scale_down);
  
	transformation = [
    // Resizing the image
    {width: width, height: height, crop: "fill"},
    // Underlaying the first matt
    {underlay: matt1_pub_id, width: (width + matt1_size), height: (height + matt1_size)},
    // Underlaying the second matt
    {underlay: matt2_pub_id, width: (width + matt1_size + matt2_size), height: (height + matt1_size + matt2_size)},
    //
    // Top frame strip
    {overlay: frame, width: (width + matt1_size + matt2_size + (thickness * 2)), height: thickness},
    {gravity: "north", y: (0 - thickness), flags: "layer_apply"},
    // Bottom frame strip
    {overlay: frame, width: (width + matt1_size + matt2_size + (thickness * 2)), height: thickness, angle: 180},
    {gravity: "south", y: (0 - thickness), flags: "layer_apply"},
    // Right frame strip + triangle cut_outs
    {overlay: frame, width: (height + matt1_size + matt2_size + (thickness * 2)), height: thickness},
    {crop: "lpad", width: (height + matt1_size + matt2_size + (thickness * 2)), height: (width + matt1_size + matt2_size + (thickness * 2)), gravity: "north"},
    {angle: 90},
    {overlay: "triangle", width: thickness},
    {angle: 180},
    {gravity: "north_east", effect: "cut_out", flags: "layer_apply"},
    {overlay: "triangle", width: thickness},
    {angle: 90},
    {gravity: "south_east", effect: "cut_out", flags:...