// 安装 // npm i --save composite-image import CompositeImage from 'composite-image'; export default { name: 'App', mounted() { const image = new CompositeImage({ bgWidth: 300, // 合成后图片的宽度 bgHeight: 400, // 合成后图片的高度 }); /** * @description 第一张图片 * @src 图片链接 * @x 相对于画布的x坐标 * @y 相对于画布的y坐标 * @width 图片的宽 * @height 图片的高 */ const cfg1 = { src: 'https://bpic.588ku.com/back_pic/19/04/14/bf310e139cf9fc16b3c032caccf6804a.jpg', x: 0, y: 0, 300, height: 300 }; /** * @description 第二张图片 * @src 图片链接 * @x 相对于画布的x坐标 * @y 相对于画布的y坐标 * @width 图片的宽 * @height 图片的高 */ const cfg2 = { src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1805103632,2396162225&fm=26&gp=0.jpg', x: 90, y: 70, 116, height: 116 }; image.composite(cfg1, cfg2).then(() => {
image.ctx.fillStyle='#E7CE86' // 设置字体颜色
image.ctx.font = '30px Adobe Ming Std' // 字体样式
// 计算文字宽度
let num = 0
this.shopName.split('').forEach(item=>{
if(/^[a-zA-Z]*$/.test(item) || /^[0-9]*$/.test(item))
{
num+=0.5
}
else if(/^[u4e00-u9fa5]*$/.test(item))
{
num ++
}
})
image.ctx.fillText('#'+this.shopName+'#',(720 - num*30)/2-18,200); // 文字和位置 text,x,y
image.print(); // 图片地址dataUrl格式,可传入生成图片类型,默认'png'
image.download('image.png'); // 将已生成图片下载至本地,可传入导出的文件名 }) } }
模块地址:https://www.npmjs.com/package/composite-image