- 博客(14)
- 收藏
- 关注
RSS订阅原创 canvas在图片上绘制标记，可拖拽、缩放，基于ZRender
如下图所示，在图片上做标记，如圆形、矩形等。该demo实现画布在页面布局中缩放后居中显示，可拖拽、缩放、做标记说明。项目下载地址：https://gitlab.com/zhangcw66/draw_mark如粘贴以下代码，请安装zrender<template><div class="draw-mark"> <div id="canvas" style...
2020-03-23 17:15:50
3041
1
原创 Failed to execute 'toDataURL' canvas导出图片报错——之进阶
canvas绘图并调用**canvas.toDataURL()**方法的时候经常会报错如下：Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.此时，几乎老铁们给出的答案都是为绘制图片添加允许跨域设置；比如：image.setAttribute(‘crossOr...
2020-03-23 11:41:44
1694
原创 Koa搭建node服务
一个简易node服务（大佬请忽略），路由配置、get/post请求、本地模拟数据库项目结构：npm install koa koa-body koa-cors koa-router -Snpm install nodemon -D (若需要热更新，则安装nodemon并使用nodemon启动服务)package.json{ "name": "koa-node", "versi...
2020-01-15 10:47:51
446
原创 canvas绘制不规则线条，类似画板的画笔，基于zrender
本文介绍绘制类似画板中画笔功能的线条zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考多数情况下绘制线条首先想到的是用Line绘制，当然1或2像素的细线没什么问题当线条变宽就有意想不到的惊喜出现了，如下图：（使用Line实例绘制）看到上图有朋友会想是因为Line是直线，拐弯Line无法绘制圆角那么为了使线条圆润可以使用Circle来绘制线条，当然这个想法很好，试一下绘...
2019-12-11 15:58:27
1046
原创 鼠标移动框选动态绘制图形，基于zrender
本文只介绍根据鼠标事件动态绘制矩形方法zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考像下图这样，可随心所欲绘制你想绘制的矩形：完整代码：（有详细注释，有任何疑问欢迎留言）<template> <div class="zrender"> <div id="zrender-canvas"></div> &l...
2019-12-10 14:52:33
1493
原创 循环发送请求，返回结果按请求顺序排序
需求描述：循环发送10次请求，请求结果为1-10，由于请求为异步，所以返回结果先后顺序不尽如人意结果可能为：[1,3,4,6,9,2,8,10,7,5] ，但这里想要的是：[1,2,3,4,5,6,7,8,9,10]。OK，先上代码：let list = [1,2,3,4,5,6,7,8,9,10]let proList= []list.forEach((item, index) =&...
2019-12-10 10:37:46
2354
原创 zrender在vue项目中的基本运用
本文只简绍zrender最简单的引入和绘制圆形方法zrender实现简易画板功能在文章末尾可参考首先保证项目已经下载了zrender包，npm install zrender引入zrender import zrender from 'zrender'html结构里放置一个绘图容器 <div id="canvas"></div>只需这三步，准备就绪，在mount...
2019-11-28 15:29:40
6221
5
原创 vue+element 图片加载失败处理方案--起死回生之术
el-image组件加载失败默认如下图：（这不是想要的结果，我想要真正加载成功的图！！！）失败的原因最大的可能就是网速不给力、页面图片太多同时请求队尾的图片请求超时等。解决方案是请求失败的图片重新发起请求！el-image结构代码如下：（循环生成的多张图片，同样适用于单张图片，不过单张图片无需如此麻烦）<div v-for="(item, index) in imgList" :k...
2019-10-17 17:37:20
5194
原创 Promise 解决一个提交按钮依赖多个表单校验的方法
一个按钮提交时依赖多个需校验的表单，如下图的执行按钮依赖两个有必输项的表单执行函数里代码如下：1、创建Promise接收校验通过返回的resolve2、Promise.all()以数组的形式传入创建好需要依赖的Promise,当所有依赖的Promise返回resolve后执行then方法注：其他需要依赖多个异步返回结果的操作此方法同样适用，此代码并不严谨只供参考，欢迎留言指教！...
2019-10-15 10:55:35
913
原创 前端上传图片预览，不上传到后端
需求：上传图片只在前端展示，并不在点击上传后上传到服务器<input @change=“handleChange” type=“file” multiple accept=‘image/png, image/jpeg, image/jpg, image/svg, image/gif’ id=‘inputFile’>上传图片html结构如下：点击上传图片选中图片后打开执行的js...
2019-10-14 10:39:46
764
原创 找出两个字符串中多出的一个字符
面试中遇到的一个题：两个字符串，第二个是第一个打乱之后多出一个字符，如何找到它？(备注：字符串不仅限于字母，多出的字符原串里不确定是否包含)var str1 = 'asdfg'var str2 = 'sgfaed'解题思路： 1、遍历两个串分别放到两个对象里，键为串的每个字符，值为字符在当前串里出现的次数 2、遍历第二个串得到的对象和第一个串得到的对...
2019-09-12 11:10:02
599
原创 js如何实现两个滚动条同步滚动
如下图所示：实现两个区域竖向滚动条同步滚动页面结构布局和样式如下：（为了一张截图展示，结构里p标签都有删减，可随意添加能出滚动条就可以）下图是js代码：代码没几行，注意下边注释，涉及同步滚动比例计算注释：1、scale为滚动条滚动比例（左边可滚动最大高度/右边可滚动最大高度）clientHeight和offsetHeight均可获取元素高度，这里用clientHeight是因为这个属...
2019-06-27 09:54:36
8839
7
原创 vue+element多级v-for循环表单验证
如下图所示：v-for循环生成的不定个数不定层级的表单验证，可以手动新增或删除，现以两层循环为例验证方法如下：先看结构首先：要为每个form-item添加rules其次：item要绑定动态的prop,如上，循环的titleParams拼接对应的下标io再拼接对应绑定的字段名称此处注意：多级循环中，下级循环item绑定的prop要从第一级循环开始拼接，如上图中的二级循环，‘titlePa...
2019-05-07 15:28:49
6667
5
原创 vue+element弹窗中表单校验遇到使用$nextTick的典型情景
vue+element弹窗中表单校验遇到使用$nextTick的典型情景如下图：新增和编辑使用同一个dialog，编辑时自带名称，然而再点新增时清空名称会有必输校验提示，现需求直接切换不需要校验提示点击编辑按钮时的弹窗（上图）点击新增时弹窗（上图）原因是：表单为必输项如下，清空后为未输入那么如下图：在新增清空名称时同时清空表单校验结果来解决表单校验提示然而这时会报错如下：表单的’r...
2019-05-06 16:52:57
2016
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人