JSFiddle - React, Tailwind, and code Playground

by Spero Koulouras

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Sample skewing image using canvas</title>
    </head>
    <body>
      <div id="stitchBox">
        <img id="img1" class="stitch" src="http://mvpone/images/3.jpg">
        <img id="img2" class="stitch" src="http://mvpone/images/1.jpg">      
      </div>
    </body>
</html>

CSS

.c { 
  width: 50%,
  }

JavaScript

// Find each img, and replace it with a canvas
var imageList=[]
$('#stitchBox').each(function (stitchIdx, el) {
	console.log("Stitchbox: " + stitchIdx + " " + el.id)
	el.querySelectorAll(".stitch").forEach(function(img, imgIdx) {
		console.log("Image: " + imgIdx + " " + img.id)
    imageList.push[img]
  })
  stitcher(imageList)
})

function stitcher(images) {
	console.log("Stitching: " + images.forEach(function(e,i) { return e.id + " "}))
}


function dummy() {
    var c,      // new canvas which will replace this img element
        ctx,    // context of new canvas
        i,      // loop counter
        tmpCtx, // temp context for doing work
        h,      // height of the image / new canvas
        w,      // width of the image / new canvas
        dh,     // destination height (used in translation)
        dw,     // destination width (used in translation)
        dy,     // destination y
        leftTop,// left top corner position
        leftBot;// left bottom corner position


    // Get the height/width of the image
    h = el.height;
    w = el.width;
    
    // Create the canvas and context that will replace the image
    c = $("<canvas class='c' height='" + h + "' width='" + w + "'><\/canvas>");
    ctx = c.get(0).getContext('2d');
    
    // Create a temporary work area
    c2 = $("<canvas class='c' height='" + h + "' width='" + w + "'><\/canvas>");
    tmpCtx = c2.get(0).getContext('2d');
        
    // Draw the image on the temp work area
    for (i = 0; i < h; i++) {
        dw = Math.abs((w * (h - i) + w * i) / h);
        tmpCtx.drawImage(el,
            0, i, w, 1,   // sx, sy, sw, sh
            0, i, dw, 1); // dx, dy, dw, dh
    }
    
    // Calculate the left corners to be 20% of the height
    leftTop = parseInt(h * .2, 10);
    leftBot = parseInt(h * .8, 10);
    
    ctx.save();
    
    // Draw the image on our real canvas
    for (i = 0; i < w; i++) {
        dy = (leftTop * (w - i)) / w;
        dh = (leftBot * (w - i) + h * i) /...