Nodejs warp image

Question

I have two images locally. First image is a cup and another is a banner. How do I warp and banner with the cup and then output a new file?

I've found the below function but how do I convert it to use in nodejs. Wrap an image around a cylindrical object in HTML5 / JavaScript

function canvas3() {

  var canvas = document.getElementById("canvas3");
  var ctx = canvas.getContext("2d");

  var productImg = new Image();
  productImg.onload = function() {
    var iw = productImg.width;
    var ih = productImg.height;

    canvas.width = iw;
    canvas.height = ih;

    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
      0, 0, iw, ih);
    loadUpperIMage()
  };

  productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg"


  function loadUpperIMage() {
    var img = new Image();

    img.src = "http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpg"

    img.onload = function() {

      var iw = img.width;
      var ih = img.height;

      //alert(iw)

      var xOffset = 102, //left padding
        yOffset = 110; //top padding

      var a = 75.0; //image width
      var b = 10; //round ness

      var scaleFactor = iw / (3 * a);

      // draw vertical slices
      for (var X = 0; X < iw; X += 1) {
        var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
        ctx.drawImage(img, X * scaleFactor, 0, iw / 1.5, ih, X + xOffset, y + yOffset, 1, 174);
      }
    };
  }

};

Answer 1

You can use canvas package in node.js too.

https://www.npmjs.com/package/canvas

import {loadImage, createCanvas } from "canvas";

...

router.get("/test", async (req: Request, res: Response) => {


    const myImg = await loadImage('https://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg');
    const canvas = createCanvas(400, 400);
    const ctx = canvas.getContext("2d")
    ctx.clearRect(0, 0, 500, 500)
    const myImg2 = await loadImage('https://i.stack.imgur.com/NkKnV.png');
    canvas.getContext("2d").drawImage(myImg,0,0,myImg.width, myImg.height);
    
    // flat
    // canvas.getContext("2d").drawImage(myImg2,myImg.width/2-30,myImg.height/2-30,60,60);
    
    //rounded
    draw(ctx, myImg2)
    
    const buffer = canvas.toBuffer('image/jpeg');
    // write a copy to the disk
    //fs.writeFileSync("c:\\dev\\image.png", buffer);
    res.write(buffer);
    res.status(200);
    res.end();

});


function draw(ctx, image) {

    const iw = image.width;
    const ih = image.height;
    const xOffset = 102; //left padding
    const yOffset = 110; //top padding
    const a = 75.0; //image width
    const b = 10; //round ness
    const scaleFactor = iw / (4 * a);

    // draw vertical slices
    for (let X = 0; X < iw; X += 1) {
      const y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
      ctx.drawImage(image, X * scaleFactor, 0, iw / 9, ih, X + xOffset, y + yOffset, 1, 174);
    }
}

And the result;