使用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; // 新的宽度为 750var 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'});};},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/711882.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【rust】11、所有权

文章目录 一、背景二、Stack 和 Heap2.1 Stack2.2 Heap2.3 性能区别2.4 所有权和堆栈 三、所有权原则3.1 变量作用域3.2 String 类型示例 四、变量绑定背后的数据交互4.1 所有权转移4.1.1 基本类型: 拷贝, 不转移所有权4.1.2 分配在 Heap 的类型: 转移所有权 4.2 Clone(深拷贝)…

Quartz 任务调度框架源码阅读解析

概念: quartz 是一个基于JAVA的定时任务调度框架 案例: <dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId><version>2.3.0</version></dependency>JobDetail job JobBuilder.newJob(Sc…

LeetCode 刷题 [C++] 第236题.二叉树的最近公共祖先

题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以…

大数据分析案例-基于SVM支持向量机算法构建手机价格分类预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

矩阵爆破逆向之条件断点的妙用

不知道你是否使用过IDA的条件断点呢&#xff1f;在IDA进阶使用中&#xff0c;它的很多功能都有大作用&#xff0c;比如&#xff1a;ida-trace来跟踪调用流程。同时IDA的断点功能也十分强大&#xff0c;配合IDA-python的输出语句能够大杀特杀&#xff01; 那么本文就介绍一下这…

【JAVA】JDK内置工具之appletviewer

下载java 下载java的时候会先下载Java jdk&#xff0c;Java Development Kit Java开发工具包。 然后会下载jre&#xff0c;也就是Java Runtime Environment Java运行环境。什么是JDK、JRE&#xff1f;_java中的jdk,jre代表什么-CSDN博客 下载之后先找到java下的bin文件&#x…

yolov9 tensorRT 的 C++ 部署

yolov9 tensorRT C 部署 本示例中&#xff0c;包含完整的代码、模型、测试图片、测试结果。 完整的代码、模型、测试图片、测试结果【github参考链接】 TensorRT版本&#xff1a;TensorRT-7.1.3.4 导出onnx模型 导出适配本实例的onnx模型参考【yolov9 瑞芯微芯片rknn部署、地平…

网络爬虫的危害,如何有效的防止非法利用

近年来&#xff0c;不法分子利用“爬虫”软件收集公民隐私数据案件屡见不鲜。2023年8月23日&#xff0c;北京市高级人民法院召开北京法院侵犯公民个人信息犯罪案件审判情况新闻通报会&#xff0c;通报侵犯公民个人隐私信息案件审判情况&#xff0c;并发布典型案例。在这些典型案…

获取PDF中的布局信息——如何获取段落

PDF解析是极其复杂的问题。不可能靠一个工具解决全部问题&#xff0c;尤其是五花八门&#xff0c;格式不统一的PDF文件。除非有钞能力。如果没有那就看看可以分为哪些问题。 提取文本内容&#xff0c;提取表格内容&#xff0c;提取图片。我认为这些应该是分开做的事情。python有…

DataSpell 2023:专注于数据,加速您的数据科学之旅 mac/win版

JetBrains DataSpell 2023是一款专为数据科学家和数据分析师设计的集成开发环境&#xff08;IDE&#xff09;。这款IDE提供了强大的数据分析和可视化工具&#xff0c;旨在帮助用户更快速、更高效地进行数据科学工作。 DataSpell 2023软件获取 DataSpell 2023在保持其一贯的数…

【多线程】常见锁策略详解(面试常考题型)

目录 &#x1f334; 乐观锁 vs 悲观锁&#x1f38d;重量级锁 vs 轻量级锁&#x1f340;自旋锁&#xff08;Spin Lock&#xff09;&#x1f38b;公平锁 vs ⾮公平锁&#x1f333;可重⼊锁 vs 不可重⼊锁&#x1f384;读写锁⭕相关面试题 常⻅的锁策略 注意: 接下来讲解的锁策略不…

cpp基础学习笔记03:类型转换

static_cast 静态转换 用于类层次结构中基类和派生类之间指针或者引用的转换。up-casting (把派生类的指针或引用转换成基类的指针或者引用表示)是安全的&#xff1b;down-casting(把基类指针或引用转换成子类的指针或者引用)是不安全的。用于基本数据类型之间的转换&#xff…

Flutter Version Manager (FVM): Flutter的版本管理终极指南

Flutter笔记 Flutter Version Manager (FVM) - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/136300307 my-websit…

SQL-Labs靶场“26-28”关通关教程

君衍. 一、二十六关 基于GET过滤空格以及注释报错注入1、源码分析2、绕过思路3、updatexml报错注入 二、二十六a关 基于GET过滤空格注释字符型注入1、源码分析2、绕过思路3、时间盲注 三、二十七关 基于union及select的过滤单引号注入1、源码分析2、绕过思路3、联合查询注入4、…

CELL文献速递 | 了解微生物如何在社会中传播并塑造我们的健康

谷禾健康 当人还是婴儿时&#xff0c;会从父母那里得到微生物&#xff1b;和宠物玩耍或接触时&#xff0c;也会从宠物那得到微生物&#xff1b;有时候人没有直接和动物玩耍&#xff0c;只是接触动物的粪便&#xff0c;甚至其他环境的微生物&#xff0c;都会交换微生物... 这些其…

智慧治水丨计讯物联水利RTU助推小型水库出险加固工程建设与管理

日前&#xff0c;水利部印发《关于健全小型水库除险加固和运行管护机制的意见》&#xff08;以下简称《意见》&#xff09;&#xff0c;健全小型水库除险加固和运行管护常态化机制&#xff0c;提高小型水库安全管理水平。《意见》提出了“十四五”的两大管理机制&#xff0c;通…

adb下载安装及使用教程

adb下载安装及使用教程 一、ADB的介绍1.ADB是什么&#xff1f;2.内容简介3.ADB常用命令1. ADB查看设备2. ADB安装软件3. ADB卸载软件4. ADB登录设备shell5. ADB从电脑上发送文件到设备6. ADB从设备上下载文件到电脑7. ADB显示帮助信息 4.为什么要用ADB 二、ADB的下载1.Windows版…

Python中reduce函数和lambda表达式的学习

reduce函数将一个数据集合&#xff08;链表&#xff0c;元组等&#xff09;中的所有数据进行下列操作&#xff1a;用传给 reduce 中的函数 function&#xff08;有两个参数&#xff09;先对集合中的第 1、2 个元素进行操作&#xff0c;得到的结果再与第三个数据用 function 函数…

【论文精读】DINOv2

摘要 学习与特定任务无关的预训练表示已经成为自然语言处理的标准&#xff0c;这些表示不进行微调&#xff0c;即可在下游任务上明显优于特定任务模型的性能。其主要得益于使用无监督语言建模目标对大量原始文本进行预训练。 遵循NLP中的这种范式转变&#xff0c;以探索计算机视…

iSlide插件2024免费版(包含52 个PPT设计辅助功能,9 大在线资源库,以及超 50 万 专业)

一、功能介绍 iSlide是一款专为PowerPoint设计的插件&#xff0c;它集合了众多设计与效率提升的功能&#xff0c;帮助用户更快速、更美观地制作演示文稿。 主题设计&#xff1a;提供多种设计主题&#xff0c;用户只需一键应用&#xff0c;即可为幻灯片赋予统一的视觉风格。智…