JSFiddle - React, Tailwind, and code Playground

by Spero Koulouras

HTML

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

CSS

.c { 
  width: 50%,
  }

JavaScript

// Find each img, and replace it with a canvas
$('img').each(function (index, el) {
    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) / w;
    
        ctx.drawImage(tmpCtx.canvas,
            i, 0, 1, h,
            i, dy, 1, dh);
    }
    
    ctx.restore();
    
    // Replace the image with the canvas version
    $(el).replaceWith(c);
});