前端js实现canves画布中拖拽、放大、缩小、旋转图片和文字，设置背景图片，导出_fabric.js 截取固定大小图片-程序员宅基地

技术标签： 前端  javascript  开发语言  

最近在研究canves，想实现一个可以在画布中操作上传的内容，不经意间发现了个插件Fabric.js。Fabric.js 是一个强大的H5 canvas框架，在原生canvas之上提供了交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。该框架是个开源项目，官网地址：Fabric.js Javascript Canvas Library     

image

安装

npm安装

npm install fabric --save

cmd安装

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>

<script src="https://unpkg.com/coco-modal/coco-modal.min.js"></script> 弹框插件

初始化

首先在html页面中写一个350 x 200的canvas标签, 这里不写宽高也行，后面可以通过js来设置宽高

<canvas id="canvas" width="350" height="200"></canvas>

初始化fabric的canvas对象，创建一个卡片（后面都用card表示画布对象）

constcard =newfabric.Canvas('canvas')// ...这里可以写canvas对象的一些配置，后面将会介绍

// 如果<canvas>标签没设置宽高，可以通过js动态设置

card.setWidth(350)card.setHeight(200)

设置画布和监听事件

// 在canvas对象初始化后，通过以下方式监听

        // 比如监听画布的图层编辑事件

        exportCanves.onclick = function(e) {

            // 导出当前画布信息

            const currState = card.toJSON(); // 导出的Json如下图

            console.log(currState)

            // 加载画布信息

            // card.loadFromJSON(lastState, () => {

            //     card.renderAll();

            // });

            const dataURL = card.toDataURL({

                format: 'jpeg', // jpeg或png

                quality: 1.8 // 图片质量，仅jpeg时可用

                // 截取指定位置和大小

                //left: 100,

                //top: 100,

                //width: 200,

                //height: 200

            });

            downloadIamge(dataURL, 'img')

        }

        card.on('object:modified', (e) => {

            console.log(e.target) // e.target为当前编辑的Object

            objectMoving(e)

            objectModified(e)

            // ...旋转，缩放，移动等编辑图层的操作都监听到

            // 所以如果有撤销/恢复的场景，这里可以保存编辑状态

        });

        // 设置画布背景颜色

        card.backgroundColor = 'white';

        // 或者

        // card.setBackgroundColor('blue');

        let selectedObj

        // 方式二
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46382293/article/details/128344418

智能推荐

利用Python scipy.signal.filtfilt() 实现信号滤波_python filtfilt-程序员宅基地

文章浏览阅读4k次，点赞9次，收藏50次。在使用Python进行信号处理过程中，利用 scipy.signal.filtfilt()可以快速帮助实现信号的滤波。1.函数的介绍(1).滤波函数scipy.signal.filtfilt(b, a, x, axis=-1, padtype='odd', padlen=None, method='pad', irlen=None)输入参数：b: 滤波器的分子系数向量a: 滤波器的分母系数向量x: 要过滤的数据数组。（array型）axis: 指定要过滤的数据数组x的轴padtype: 必_python filtfilt

N皇后问题解法及解的个数_n皇后问题答案个数-程序员宅基地

文章浏览阅读3.4w次，点赞17次，收藏66次。1、将第一个皇后放置在第一行的第一个空格里 2、对于第二行，从第一个空格开始寻找不与第一行的皇后冲突的空格。找到的第一个不冲突的空格是第2个。 3、对于第三行，这时已经找不到与之前放置的两个皇后不冲突的空格了。把当前行恢复初始状态，返回到上一行。 4、在当前行皇后所占的空格之后寻找一个不与之前皇后冲突的位置。有两种情况，如果找打了则把当前行的皇后移动到该位置，然后处理下一行。如果直到最后当前行的最后一个空格也没有找合适的位置，则把当前行恢复初始状态，继续回溯到上一行。 5、把最后一个皇后成功安置在最_n皇后问题答案个数

ModuleNotFoundError: No module named ‘utils.utils‘ pytorch项目报错_no module named 'utils.utils-程序员宅基地

文章浏览阅读2w次，点赞19次，收藏35次。首先呢会报错是因为引入的问题 代码是这样的但是sys.path.append的功能仅限当前的目录sys.path.append("..")from utils.utils import MyDataset, validate, show_confMat所以应该改为sys.path.append("..")from Code.utils.utils import MyDataset, validate, show_confMat这部分的引入应该从当前目录开始引入比如用这种方式._no module named 'utils.utils

如何在macOS中检查Apple Magic Keyboard电池电量？_mx keys 电量查询-程序员宅基地

文章浏览阅读1.3k次。如何在macOS中检查Apple Magic Keyboard电池电量？Apple的Magic Keyboard结合了时尚的设计，每个按键下方的稳定剪刀机制以及内置的可充电电池，可通过随附的Lightning至USB电缆为它充电，这意味着您不必为更换AA电池而烦恼。以下步骤向您展示了操作方法：1.点击Mac屏幕左上角菜单栏中的Apple符号。2.选择系统偏好设置3.选择键盘首选项窗格。4.选中“键盘”选项卡后，检查窗口左下角的键盘电池电量。这显示了Apple蓝牙键盘电池中剩余的电池寿命百分比。_mx keys 电量查询

kvm切换器是什么?_visio中有kvm-程序员宅基地

文章浏览阅读384次。KVM切换器又被称为多计算机控制器，一台KVM切换器可以控制2台、4台、8台、16台或更多的计算机或服务器，它们之间的网络连接在全球不论远近都可控制；KVM切换器的控制端口主要用来连接键盘和鼠标的USB端口与显示器的VGA端口。推荐：《编程视频》在服务器机房的机架不便于存放多个显示器和键盘的空间里，KVM切换器起着重要的作用。KVM切换器能从本地或远程监视与控制多个计算机与服务器，由键盘、鼠标和显示屏组成的KVM控制台是最方便和经济的理想解决方案。1、什么是KVM切换器KVM切换器又被称为多计算机控_visio中有kvm

error C2143: 语法错误 : 缺少“;”(在“*”的前面) error C4430: 缺少类型说明符 - 假定为 int。_error c2143: 语法错误: 缺少“;”(在“*”的前面)-程序员宅基地

文章浏览阅读1.4k次。error C2143+error C4430+error C2238_error c2143: 语法错误: 缺少“;”(在“*”的前面)

随便推点

Selenium IDE的使用方法-程序员宅基地

文章浏览阅读1w次，点赞5次，收藏67次。Selenium介绍Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。Selenium家庭成员有三个，分别是Selenium WebDriver、Selenium IDE和Selenium Grid，这篇博客主要介绍Selenium IDE的使用方法。Selenium官网地址Selenium IDE介绍Selenium IDE是Chrome和FireFox浏览器中的插件，Selenium IDE结合浏览器提供脚本录制、脚本回放、脚本_selenium ide

Scalar, Vector, Matrix, Tensor, Array 傻傻分不清楚，看完这篇可视化你就明白！_scalar和vector怎么分-程序员宅基地

文章浏览阅读1.2w次，点赞19次，收藏62次。目录Scalar（标量）Vector（向量）Matrix（矩阵）Tensor（张量）Array（数组）先上两张图感受下，Scalar-Vector-Matrix-Tensor的过程即从单个数值到一维到二维一直不断增加维度的数据结构。Scalar（标量）Vector（向量）Matrix（矩阵）Tensor（张量）Array（数组）..._scalar和vector怎么分

OpenCL使用子缓冲对象（Sub buffer）报错CL_DEVICE_MEM_BASE_ADDR_ALIGN的解决方法_opencl subbuffer-程序员宅基地

文章浏览阅读399次。最近由于新冠疫情原因宅于家中，不得不重新搞个电脑继续毕设之旅，学校所用电脑为i5-6500+Titan xp，在家只能自掏腰包配了个i5-9400f + 1660，CPU升级了下，GPU看看就好。废话不说了，直奔主题。在使用OpenCL创建子缓冲对象时，使用 i5-9400f CPU 作为计算设备会出现 CL_DEVICE_MEM_BASE_ADDR_ALIGN，而对于相同的程序，GPU则..._opencl subbuffer

jupyter notebook版本更新和降低版本命令_jupyternotebook 降版本-程序员宅基地

文章浏览阅读1.2w次。安装更高的版本：pip install -U "notebook>6.0"降低版本pip install -U "notebook<5.0"_jupyternotebook 降版本

Jenkins 部署（Docker）_h: 2: cd: can't cd to /var/jenkins_mount/workspace-程序员宅基地

文章浏览阅读6.4k次，点赞6次，收藏43次。环境docker v20.10.6 + jenkins/jenkins（image）部署1. 下载镜像docker pull jenkins/jenkins2. 创建工作目录在服务器创建 Jenkins 工作目录 /var/jenkins_mount 并授权权限，启容器时将 jenkins 容器目录挂载到这个目录上mkdir -p /var/jenkins_mountchmod 777 /var/jenkins_mount3. 启动容器docker run -d -p 1024_h: 2: cd: can't cd to /var/jenkins_mount/workspace/gtstorageweb

MySQL和hive建表区别,Hive中創建表（hive的使用和MySQL的使用很相似）-程序员宅基地

文章浏览阅读262次。CREATE TABLE語句(不區分大小寫)Create Table是用於在Hive中創建表的語句，語法和示例如下：語法：CREATE [TEMPORARY] [EXTERNAL] TABLE [IF NOT EXISTS] [db_name.] table_name[(col_name data_type [COMMENT col_comment], ...)][COMMENT table_co..._hive create table stored as mysql

推荐文章

热门文章

相关标签