fabric自动拉伸背景图，坑！坑！坑！

最新推荐文章于 2024-06-24 18:50:01 发布

阳光先做

最新推荐文章于 2024-06-24 18:50:01 发布

阅读量1.5k

点赞数

分类专栏： fabric js 文章标签： javascript

本文链接：https://blog.csdn.net/m0_38062866/article/details/109578245

版权

js 同时被 2 个专栏收录

10 篇文章

订阅专栏

fabric

2 篇文章

订阅专栏

本文介绍如何使用Fabric.js将一张图片按Canvas大小等比例缩放并填充背景。通过设置scaleX和scaleY属性为Canvas与图片宽度和高度的比例，可以确保图片完全覆盖Canvas区域，并保持原始宽高比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  fabric.Image.fromURL('图片', (img, isError) => {
                    img.set({
                        scaleX: this.canvas.width / img.width,
                        scaleY: this.canvas.height / img.height,
                        // width: this.canvas.width,
                        // height: this.canvas.height,
                        // Needed to position backgroundImage at 0/0
                        // originX: 'left',
                        // originY: 'top'
                        left: 0,
                        top: 0
                    });
                    this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
                });

切记： scaleX和 scaleY不要重复配置，否则不生效，坑

关注博主即可阅读全文