weixin_47359038的博客

项目中有个需求，需要对图片附件进行简单的编辑操作，如涂鸦、添加文字、拖动与缩放图片、旋转图片、保存图片、上传图片等。经过技术选型对比，决定使用fabric.js开源库

网上看了一些对fetch的封装，有点看不伶清。如在request中配置timeout与responseType字段等，在文档上找根本找不到。于是自己封装个简单版的fetch，方便拿到项目中改造一下就可以使用。

地图页面左侧全量树新需求，想要实现左侧树的拖拉效果，方便用户使用。查阅资料发现使用js逻辑，通过监听鼠标按下、移动、抬起事件等进行处理可以实现，但是考虑到地图页面的性能已经吃不消了，于是不使用此方法实现。之前看过相关css中的resize属性使用的文章，查看有关博客感觉可以实现元素的拖拉效果，于是使用resize属性进行功能实现。

项目中有一个二维码复制功能，首先是根据所选择的组织与邀请成为的角色，后端返回一个二维码数据链接，将二维码渲染展示在页面上；然后在点击复制按钮时可以复制二维码，在其它的地方可以直接粘贴使用。复制二维码还不是简单的复制二维码图片，而是还要加上一些其它的描述西信息，如邀请进行的项目、邀请到的组织、邀请成为的角色等，这些信息和二维码一起转成一个图片进行复制。

在项目开发中用到了将相关dom元素转为一个base64格式的图片链接，进行后续预览功能。本地开发时一切正常，放到线上环境中发现了2个问题，一个是线上加载http链接资源的问题，一个是图片的跨域问题。

首先是先创建一个canvas元素，让canvas元素的宽高与父容器的宽高一样，并支持响应式。还有给canvas元素添加一些监听事件。// HTML部分 < div class = "canvas-container w-full h-full relative" > < canvas。

之前看过一篇CJS与ES6的导入导出文章，发现自己看不懂，平时项目上都是基础的导入导出使用，根本没考虑其中的细节，导致有没有写过bug自己也不知道。此文记录一下使用时的注意点。

最近有个项目用到了高德地图，基于高德引擎进行相关需求的开发，开发过程中碰到了一些问题，简单的记录一下。

同事开发拓扑组件时，碰到一个谜题，让我解决一下。在拓扑节点展开收缩时，收缩是正常的，而在节点展开时，拓扑节点渲染的不正常，节点的label不更新。节点收缩前的lable值各不相同。

我不负责拓扑组件是对的，就应该给大佬去维护，大佬参考github上issue中的讨论与代码思路，实现了线条上的流动效果，牛的牛的，我赶紧学习一波，下面代码实现都是初步思路，没有进行实现优化，如防抖优化、定时器优化等，根据项目需求自行优化即可。vis-network中没有提供流动的配置，这个功能需要自己去实现。思路是需要自己绘制一个canvas图层，和地图功能类似，在自定义canvas上实现流动功能。但是简单的实现流动功能还是不行的，拓扑图是支持平移、缩放等操作的，所以自定义canvas也是适配这些操作，在拓

vis-network绘制拓扑图

文章目录前言pdf.js引入项目使用构建包构建包的使用jsPDF前言这里主要使用到了两个库，pdf的展示是开源库pdf.js，和canvas结合使用；生成pdf的开源库是jsPDF。pdf展示的demo: http://121.4.85.237/pdf.js这个开源库很牛的，详细内容看官网就行了，我这里就简单的贴一些例子和pdf.js的两种使用方式。官网：https://github.com/mozilla/pdf.js这个pdf.js还是有一个官网demo的可以玩一下。http

文章目录前言思路分析绘制图片mousedownmousemovemouseup图片裁剪画布响应式前言在学习原生canvas，顺便做一个canvas进行图片剪切的小练习，加深自己对canvas的理解。计划做一个很简单很简单版的小demo，主要使用到canvas元素和一些鼠标监听事件。小demo: http://121.4.85.237:7778/思路分析1 图片可以在canvas上进行绘制2 绘制的图片在canvas中可以随意拖动(重绘)3 图片也要支持放大与缩小(重绘)4 点击图片裁

文章目录callapplybindcall封装一个很简单的函数，简单的理解一下call的工作机制。不考虑各种传参问题，假设按正常规则进行传参。Function.prototype.fnCall = function (thisArg, ...args) { const fn = this; // this指向sum函数 // 要转为一个对象类型，Object()的作用在讲对象时已经说过 thisArg = thisArg !== undefined && thisArg

文章目录前言instanceof前言在写对象相关方法时用到了instanceof来判断对象是否属于某种类型，研究一下是怎么实现的，加深自己的理解。instanceof如下面一个小案例：const arr = [1, 2, 3];console.log(arr instanceof Array); // true其实instanceof原理是判断左边对象的原型链中是否存在右边对象的原型对象。封装一个很简单版的函数，便与理解instanceof工作机制。function fnInstanc

文章目录前言SortableJSvuedraggablevue-draggable-resizablevue-drag-resizevue-draggable-resizable-gorkysvue-grid-layout手撸拖动布局总结前言抽了两天空闲时间玩了一下拖拽布局，用的少有点生疏，通过学习熟练一下各种拖拽事件。主要有列表拖拽、表格拖拽、表单拖拽、自定义拖拽布局等，本文会使用开源库来实现这几种拖拽，自定义布局中也可以手撸代码。SortableJSSortableJS开源库是最基础的一个开

文章目录前言lodash.cloneDeep()JSON.parse(JSON.stringify())自己封装深拷贝总结前言在开发中涉及到对象或数组的深拷贝，推荐使用lodash库中的cloneDeep方法，我在github上看这个方法已经好几年没更新了，说明已经很成熟了。哪怕自己封装，封装到最完善也和这个方法一样，重复造轮子！这里主要理一下深拷贝函数的封装思路。lodash.cloneDeep()使用很简单，就是引库调函数。var _ = require('lodash');var obj

文章目录前言浅拷贝Array.concat()Array.slice()剩余运算符...Object.assign()总结前言前两天看了一个朋友的博客，卧槽好几个常用的方法都是浅拷贝，平时使用的时候都没注意过。以后要注意一下，不然数据怎么改了自己都摸不着头脑。朋友的文章地址：https://blog.youkuaiyun.com/qq_31947477/article/details/105989604?spm=1001.2014.3001.5502浅拷贝浅拷贝主要是用来复制对象的键值，当最外层键值是基

文章目录前言原型链继承经典组合继承寄生组合继承总结前言这次想讲一些对象继承的方式，主要有原型链继承，经典组合继承，寄生组合继承。原型链继承主要是通过原型链实现继承，此方法有很多弊端，不推荐。function Person() { this.name = "aaa" this.friends = [1,2]}Person.prototype.eating = function() { console.log(this.name + " eating~")}function Stud

js对象的一些常用方法