2

我有一组 4500x5400 的 png 文件。

我想做的是以下几点：

  1. 以 300dpi 画一个 485x485 的圆
  2. 将 png 覆盖在圆圈内，使其调整大小（缩放）

我整晚都在胡闹，但我并没有走得太远：

我有我圈子的代码：

  '<svg height="485" width="485"><circle cx="242.5" cy="242.5" r="242.5" fill="#3a4458"/></svg>'

然后是一些调整我的png大小的调整大小代码，并将其掩盖。

sharp(`${toConvert}/${file}`)
  .trim()
  .resize(485, 485)
  .embed()
  .overlayWith('overlay.png', { cutout: true } )
  .toFile(`./converted/${file}-pop.png`)
  .catch(err => {
    console.log(err)
  })

有谁知道我可以如何将 2 组合起来，这样我就可以得到一个带有我的 png 的彩色圆圈？

作为参考，Sharp是一个图像处理库：https ://github.com/lovell/sharp

4

1 回答 1

3

这是来自我的项目，它有一个圆形封面，

首先在SVG.js的帮助下创建一个圆形 SVG，您可以使用 background 属性来获取彩色圆圈。

const window = require('svgdom');


const SVG = require('svg.js')(window);

const document = window.document;


const ShapeUtil = {

    drawCircle: function (width, height) {
        return new Promise(function (resolve, reject) {
            var circleDraw = SVG(document.documentElement).size(width, height);

            circleDraw.clear();
            circleDraw.viewbox(0, 0, width, height);
            circleDraw.circle(width).cx(Math.abs(width / 2)).cy(Math.abs(width / 2));
            resolve(circleDraw.svg());
        });

    } 

};

然后使用 Sharp.io 覆盖创建 SVG dom 以裁剪图像：

 ShapeUtil.drawCircle( width,  height)
                        .then(function (resultSVG) {
                            sharp(croppedImage)
                                .overlayWith(new Buffer(resultSVG), {cutout: true})
                                .png().toBuffer();
                        }
于 2018-04-15T11:03:22.157 回答