How to reposition an image, through a matrix with fabricjs?

Question

I have the following matrix for an image:

var Matrix = [0.172549, 0, 0.172549, 0, 0];

I would like to position this image with this matrix above, and within the scale of a container:

My code:

var obj_ = {
   url:'imagem.jpg',
   matrix: [0.172549, 0, 0, 0.172549, 0, 0]
}

$scope.canvasShape = new fabric.Canvas('shapes', {
                        isDrawingMode: true,
                        selection: false,
                        backgroundColor: null,
                        preserveObjectStacking:true
                    });

 function addImg(e){

  fabric.Image.fromURL(dataURL, function(oImg) {


      if(e == null) {

         // console.log(dataURL, e, obj_);

              // console.log(obj_.matrix);
          if(obj_.matrix && obj_.matrix != null && obj_.matrix.length == 6) {
              console.log(obj_.matrix);
             // oImg.transformMatrix = obj_.matrix;
             oImg.transformMatrix = [0.172549, 0, 0, 0.172549, 0, 0];
              // oImg.scaleToWidth(1140);
              // oImg.scaleToHeight(595);
              oImg.scale(1)
                   .set({'width': 900});
                   // .set({'height': 850});

              var currentT = oImg.calcTransformMatrix();

              var transformMatrix = oImg.transformMatrix;
              // multiply the matrices together to get the combined transform
              var mT = fabric.util.multiplyTransformMatrices(currentT, transformMatrix);
              // Unfold the matrix in a combination of scaleX, scaleY, skewX, skewY...
              var options = fabric.util.qrDecompose(mT);
              var newCenter = { x: options.translateX, y: options.translateY,  };


              var mCanvas = $scope.canvasShape.viewportTransform;
              var mObject = oImg.calcTransformMatrix();
              var mTotal = fabric.util.multiplyTransformMatrices(mCanvas, mObject); // inverting the order gives wrong result
              var mInverse = fabric.util.invertTransform(mTotal);

              var updatedPoints = oImg.get('points')
              .map(function(p) {
                  return new fabric.Point(newCenter.x, newCenter.y);
              });

              var pointInObjectPixels = fabric.util.transformPoint(updatedPoints, mInverse);

          } else {
              oImg.transformMatrix = [1,0,0,1,0,0];
              oImg.scale(0.2);
          }
          oImg.flipX = false;
          oImg.flipY = false;


         //  // get the current transform matrix, from object properties.
         //  var currentT = oImg.calcTransformMatrix();
         //  // get the transformMatrix array
         //  var transformMatrix = oImg.transformMatrix;
         //  // multiply the matrices together to get the combined transform
         //  var mT = fabric.util.multiplyTransformMatrices(currentT, transformMatrix);
         //  // Unfold the matrix in a combination of scaleX, scaleY, skewX, skewY...
         //  var options = fabric.util.qrDecompose(mT);
         //  var newCenter = { x: options.translateX, y: options.translateY };
         //  // reset transformMatrix to identity and resets flips since negative scale
         //  // resulting from decompose, will automatically set them.
         //  oImg.set(options);
         //  // position the object in the center given from translateX and translateY
         //  oImg.setPositionByOrigin(newCenter, 'center', 'center');
         // // var x = options.translateX -  $scope.canvasShape.offset._left; //x position within the element.
         // // var y = options.translateY - $scope.canvasShape.offset._top;  //y position within the element.
         //
         //  var x = 0; //x position within the element.
         //  var y = 0;  //y position within the element.
         //
         //  var updatedPoints = oImg.get('points')
         //      // .map(function(p) {
         //      //     return new fabric.Point(p.x - oImg.minX - oImg.width / 2, p.y - oImg.minY - oImg.height / 2);
         //      // })
         //      .map(function(p) {
         //          return fabric.util.transformPoint(p, currentT);
         //      });

          oImg.set(pointInObjectPixels);

          // oImg.set({
          //     scaleY: imgH / origH,
          //     scaleX: imgW / origW,
          //     originX: "center",
          //     originY: "center"
          // });


      } else {
          oImg.scale(0.2);
          var rectCli = e.target.getBoundingClientRect();
          var x = e.clientX - rectCli.left; //x position within the element.
          var y = e.clientY - rectCli.top;  //y position within the element.
      }




      //
      // var l = Math.random() * (500 - 0) + 0;
      // var t = Math.random() * (500 - 0) + 0;


      oImg.set({'left':x});
      oImg.set({'top':y});
      $scope.canvasShape.set({hoverCursor: "default"});
      $scope.canvasShape.set({defaultCursor: "default"});
      $scope.canvasShape.add(oImg);
      if(e != null) {
          $scope.canvasShape.setActiveObject(oImg);
      }else {
          $scope.canvasShape.bringToFront(oImg);
          $scope.canvasShape.requestRenderAll();
      }
  });

}

Fabricjs Library -> canvas editor

Answer 1

I solved the problem as follows:

 oImg.transformMatrix = [0.172549, 0, 0, 0.172549, 0, 0];

  var currentT = oImg.calcTransformMatrix();
  var transformMatrix = oImg.transformMatrix;
  var mT = fabric.util.multiplyTransformMatrices(currentT, transformMatrix);
  var options = fabric.util.qrDecompose(mT);
  var c = new fabric.Point(options.scaleX, options.scaleY);
  var p = fabric.util.transformPoint(c, mT);

  oImg.set('left', (p.x / 6) - 250);
  oImg.setTop((p.y / 6) + 80);
  oImg.set('width', 1600);
  oImg.set('height', 800);
  oImg.set('scaleX', (options.scaleX) - 1600);
  oImg.set('scaleY', (options.scaleY) - 1600);
  oImg.set('skewX', options.skewX);
  oImg.set('skewY', options.skewY);
  oImg.scale(0.8);