Question

我有一组png文件，即4500x5400。

我要做的是以下内容：

以300dpi
将圆圈内的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的彩色圆圈？

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

Answer 1

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

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

—save

然后使用Sharp.io：

将创建的SVG dom叠加到裁剪后的图像上

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将png覆盖到SVG上？

1 个答案: