javascriptnode.jsimagewarp

Nodejs warp image


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? enter image description here enter image description here

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);
      }
    };
  }

};


Solution

  • 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.sstatic.net/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;

    enter image description here