使用Fabric创建的canvas画布背景图片,自适应画布宽高

之前的文章写过vue2使用fabric实现简单画图demo,完成批阅功能;但是功能不完善,对于很大的图片就只能显示一部分出来,不符合我们的需求。这就需要改进,对我们设置的背景图进行自适应。

有问题的canvas画布背景

修改后的画布背景就可以自适应了

创建的具体代码请看之前的文章,这里只提供解决办法

js部分,重写了设置背景的方法。

主要是 使用scale在x轴和y轴上进行缩放

scaleX: _this.fabricObj.width / img.width,

scaleY: _this.fabricObj.height / img.height,

复制代码
 setBackgroundImg(imgUrl) {
        // 创建一个新的 Image 对象
        var img = new Image();
        // img.crossOrigin = 'Anonymous'; // 设置允许跨域访问
        img.src = imgUrl;

        // 保存外部环境的引用
        var _this = this;

        // 在图片加载完成后执行操作
        img.onload = function () {
          var aspectRatio = img.width / img.height;
          var newWidth = 750; // 新的宽度为 750
          var newHeight = newWidth / aspectRatio; // 根据宽高比计算新的高度

          // 设置 Canvas 的宽度和高度
          _this.fabricObj.setWidth(newWidth);
          _this.fabricObj.setHeight(newHeight);
          // 将背景图片添加到Canvas中
          _this.fabricObj.setBackgroundImage(
            img.src,
            function () {
              _this.fabricObj.renderAll();
            },
            {
              scaleX: _this.fabricObj.width / img.width,
              scaleY: _this.fabricObj.height / img.height,
              crossOrigin: 'anonymous'
            }
          );
        };
      },
相关推荐
少年阿闯~~几秒前
CSS3的新特性
前端·javascript·css3
IT_陈寒6 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询23 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang25 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼28 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny078 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy9 小时前
css的基本知识
前端·css
昔人'9 小时前
css `lh`单位
前端·css