0
144
VistasImagen de deformación de Nodejs
Tengo dos imágenes localmente. La primera imagen es una taza y la otra es un banner. ¿Cómo puedo deformar y pancartar con la copa y luego generar un nuevo archivo? 
Encontré la siguiente función, pero ¿cómo la convierto para usarla en nodejs? Envuelve una imagen alrededor de un objeto cilíndrico en 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); } }; } };
·
Santiago Gelvez
1 Respuestas
Responde la pregunta0
También puede usar el paquete canvas en node.js.
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); } }Y el resultado;
·
Santiago Gelvez
Denunciar
Responde la pregunta