前端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
// 方式二
智能推荐
Spring @Service生成bean名称的规则（当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致）_@service beanname-程序员宅基地
文章浏览阅读7.6k次，点赞2次，收藏6次。@Service标注的bean，类名：ABDemoService查看源码后发现，原来是经过一个特殊处理：当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
css图片居中_css图片居中对齐-程序员宅基地
文章浏览阅读6.9k次，点赞4次，收藏14次。css图片水平垂直居中_css图片居中对齐
为什么大家都在吹捧Python？-程序员宅基地
文章浏览阅读120次。2020年，Python可学吗？答案是可。近些年间，Python 的火热有目共睹，作为一种功能强大的高级编程语言，在2018 年的时候它的流行程度就得到了大幅提高。图源：Stack Ov..._为啥这么多人吹python
String对象在内存中的位置_对string对象取地址是什么意思-程序员宅基地
文章浏览阅读991次。首先我们先看一段代码public static void main(String[] args) { String s1 = new String("abc"); String s2 = "abc"; // s1 == s2? String s3 = s1.intern(); // s2 == s3? }答案： s1 == s2为falses2 == s3为trueString对象在内存中的位置既然String是一个immutable的类，那么对于同样值的String实例，_对string对象取地址是什么意思
Kratos，RPC服务调用过程_kratos 如何调用另一个服务数据-程序员宅基地
文章浏览阅读1k次。首先，客户端发起RPC调用请求// SayHello say hello.func (d *dao) SayHello(c context.Context, req *api.HelloReq) (resp *empty.Empty, err error) { if resp, err = d.demoClient.SayHello(c, req); err != nil { ..._kratos 如何调用另一个服务数据
Java简历石投大海了无音讯，是否是互联网寒冬所致?-程序员宅基地
文章浏览阅读144次。前言小编最近在网上看到一个问题，某网友：我最近在网上投简历怎么没人给我打电话啊，我找java开发的工作?这个问题引发了小编对于这个问题的思考，我们往下看吧。概述最近互联网寒冬吧算是。目前互联网公司纷纷裁员或倒闭或架构进行优化。有一个做Java方面的朋友最近也在找工作，一线城市北京，投了三四百家，就有不到10个买时电话，后来我建议他爸简历优化一下，同时对每一次面试做一些总结，去公司的面试要求进一...
随便推点
笔记-编译原理-实验一-词法分析器设计_对pl/0作以下修改扩充。增加单词-程序员宅基地
文章浏览阅读2.1k次，点赞4次，收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别，找出文件中所有的合法的单词，并给出一定的信息作为最后的结果，用于后续语法分析程序的使用；本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序，对于每个单词根据词汇表输出： (单词种类, 单词的值) 二元对。词汇表：种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
android adb shell 权限,android adb shell权限被拒绝-程序员宅基地
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
投影仪-相机标定_相机-投影仪标定-程序员宅基地
文章浏览阅读6.8k次，点赞12次，收藏125次。1. 单目相机标定引言相机标定已经研究多年，标定的算法可以分为基于摄影测量的标定和自标定。其中，应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统，在标定过程中，相机拍摄多个角度下（至少两个角度，推荐10~20个角度）的标定板图像（相机和标定板都可以移动），即可对相机的内外参数进行标定。下面介绍张氏标定法（以下也这么称呼）的原理。原理相机模型和单应矩阵相机标定，就是对相机的内外参数进行计算的过程，从而得到物体到图像的投影_相机-投影仪标定
Wayland架构、渲染、硬件支持-程序员宅基地
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述： 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构；一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件，并通过 evdev 输入_wayland
THM学习笔记——SQL注入_sql插入htm-程序员宅基地
文章浏览阅读1.2k次，点赞21次，收藏22次。SQL注入，通常称为SQLi，是对 Web 应用程序数据库服务器的攻击，导致执行恶意查询。_sql插入htm
记录一次抓包实战，全局代理+xposed+frida绕过各种坑点_frida软件-程序员宅基地
文章浏览阅读5.4k次，点赞5次，收藏22次。遇到的问题apk使用了360加固，无法反编译apk没有走系统代理，导致设置wifi代理抓不到包问题1解决办法：使用FRIDA-DEXDump工具直接从内存dump出dex包，然后使用jadx-gui-1.1.0-with-jre-windows工具打开dex文件查看代码FRIDA-DEXDUMPgithub链接jadx-gui网上比较多，自行百度下载需要先按照frida,自行百度下载安装问题2解决办法：有两种方法：使用vpn代理将app流量全部代理到抓包工具的ip端口使用OkHt_frida软件