使用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'
            }
          );
        };
      },
相关推荐
码蜂窝编程官方8 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss8 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃13 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰18 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye24 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm26 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子