当前位置: 首页 > 面试题库 >

将2张图片与node.js合并?

甘骞尧
2023-03-14
问题内容

我想使用node.js合并2张图片。或者更确切地说,我想将一个较小的图像放置在较大图像上的坐标x,y上。甚至更精确:我有一个眼镜的图像和一张脸的图像,并且我想将眼镜放在脸上。我做了一些谷歌搜索,发现了一些图像处理库,但似乎没有一个能够合并图像。


问题答案:

我用过:

https://github.com/learnboost/node-
canvas

做类似的事情(动态地从组件构建合成图像)。

效果很好。

这是一些示例代码:

var Canvas = require('canvas'),
  fs = require('fs'),
  Image = Canvas.Image;



var _components = [{prefix:'f', count:12},
                   {prefix:'h', count:12},
                   {prefix:'i', count:12},
                   {prefix:'m', count:12}];


var _total = 1;
for (var i=_components.length - 1; i>=0; i--){
  _components[i].mult = _total;
  _total *= _components[i].count;
}


module.exports.ensureImageExists = function(img, cb){
  fs.stat(__dirname + '/../public/images/rb/' + img, function(err, stats){
    if (err){
      if (err.code == 'ENOENT')
        generateImage(img, cb);
      else
        cb(err);
    }
    else{
      cb();
    }
  });
}

function generateImage(name, cb){
  var re = /rb([0-9]*)\.png/

  var num = parseInt(re.exec(name)[1]) % _total;

  var parts = [];
  for (var i=0; i<_components.length; i++){
    var n = Math.floor(num / _components[i].mult);
    parts.push(_components[i].prefix + (n + 1));
    num -= n * _components[i].mult;
  }

  var canvas = new Canvas(45, 45),
   ctx = canvas.getContext('2d');

  drawParts();

  function drawParts(){
    var part = parts.shift();
    if (!part)
      saveCanvas();
    else {
      var img = new Image;
      img.onload = function(){
        ctx.drawImage(img, 0, 0, 45, 45);
        drawParts();
      };
     img.src = __dirname + '/components/' + part + '.png';
    }
  }

  function saveCanvas(){
    canvas.toBuffer(function(err, buf){
      if (err)
        cb(err);
      else
        fs.writeFile(__dirname + '/../public/images/rb/' + name, buf, function(){
          cb();
        });
    });
  }

}

在这种情况下,将根据图像的名称选择组件,但是显然可以这样做。另外,我想您可以根据需要将图像流式传输出去-我将其写入文件,以便下次请求时可用。

我输入了这样的路线来处理这一代:

app.get('/images/rb/:img', requireLogin, function(req, res, next){
  //first make sure image exists, then pass along so it is handled
  //by the static router
  rbgen.ensureImageExists(req.params.img, function(err){
    next();
  })
});


 类似资料:
  • 问题内容: 我有几个映像(第3方),例如,设置mysql,设置通用的php应用程序环境,设置第3方工具。 我想制作一个Dockerfile / Docker映像,将两个映像合并,然后运行更多命令 问题答案: 您可以将它们链接起来。你可以在这里找到更多 https://github.com/docker/docker/issues/3378#issuecomment-31314906 摘自上面的链接

  • 问题内容: 我有4个带有动画图像的目录。我想拍摄一组图像,并为动画的每一帧将4张图像排列成2x2网格来生成单个图像。 到目前为止,我的代码是: 不知道为什么它不起作用。我收到错误消息: 任何帮助都是极好的。谢谢! 问题答案: 唯一的问题是“粘贴”不返回图像对象-而是就地修改了“空白”图像。 因此,当调用第二个粘贴(使用fuild128图像的粘贴)时,它将尝试应用到“无”上-这是第一个图像的返回值。

  • 图片优化与合并 在 HTML 中使用背景图片的方法如下: <button type="button" class="btn-default">Click Me</button> <style type="text/css" media="screen"> .btn-default { background: url(image/btn.png) no-repeat 0 0; } .btn

  • 本文向大家介绍微信小程序实现张图片合成为一张并下载,包括了微信小程序实现张图片合成为一张并下载的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现张图片合成为一张并下载的具体代码,供大家参考,具体内容如下 微信小程序海报 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍python实现两张图片的像素融合,包括了python实现两张图片的像素融合的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了python实现两张图片像素融合的具体代码,供大家参考,具体内容如下 通过计算两张图片的颜色直方图特征,利用直方图对图片的颜色进行融合。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍python使用PIL实现多张图片垂直合并,包括了python使用PIL实现多张图片垂直合并的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了python实现多张图片垂直合并的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。