我有一组png文件,即4500x5400。
我要做的是以下内容:
我一直在搞乱,但我没有走得太远:
我已经获得了我的圈子的代码:
'<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
答案 0 :(得分:2)
这是来自我的项目,它有一个圆形封面页,
首先在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());
});
}
};