Rotate UGC

Test page for ugc manipulation.

by karlovac

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations -->
<h1>UGC Cropping Text</h1>
<h2>This is how it should look:</h2>

<img id="expected" alt="Expected" width="250" height="250" />

<h2>Here's the result:</h2>

<canvas id="canvas" width="1200" height="1200"></canvas>

JavaScript

var recipe = '50878041';
var recipeUrl = 'https://api.fluidretail.net/recipe/'+recipe+'?api-key=Waddington-5qmrvmrNCsdCbxqnp5aKqs3gk18n&locale=en_us&include=localized_configuration,extended_attributes';

function draw(ugcImageUrl, matrix) {
  var ctx = document.getElementById('canvas').getContext('2d');
	
  var new_image = new Image();
  new_image.crossOrigin = "Anonymous";
  new_image.src = ugcImageUrl;
  new_image.onload = function () {
    var originalWidth = this.width;
    var originalHeight = this.height;
    var isTaller = originalHeight > originalWidth;
    var newDim = isTaller ? originalHeight : originalWidth;
    var movesHorizontally = matrix[4] * newDim;
    var movesVertically = matrix[5] * newDim;
    var scaleX = matrix[0];
    var skewX = matrix[1];
    var skewY = matrix[2];
    var scaleY = matrix[3];


    ctx.transform(scaleX, skewX, skewY, scaleY, movesHorizontally, movesVertically);
    ctx.drawImage(new_image, -originalWidth / 2, -originalHeight / 2);
    console.log(ctx.canvas.toDataURL());
  }
}

$.ajax({
  dataType: "json",
  url: recipeUrl,
  success: function(recipe) {
	  var matrix = recipe.localized_configuration.ugc.transform;
    var ugcImageUrl = 'https://imagecomposer.fluidretail.net/ugc/'+recipe.localized_configuration.ugc.clipArt+'?customerId='+recipe.customer_id;
  	draw(ugcImageUrl,matrix);
    $('#expected').attr('src', recipe.images.main);
  }
});