0

这一款开源免费的富文本编辑器,是值得推荐的——Quill

介绍Quill是一个所见即所得的富文本编辑器,是一个集兼容性和可扩展性于一体的优秀编辑器,Githubhttps://github.com/quilljs/quillQuill特点开发友好通过简单的API可以细粒度地访问编辑器的内容,更改和事件。使用JSON作为输入和输出一致且确定性的工作兼容性好支持台式机,平板电脑和手机上的所有现代浏览器。体验相同的一致行为,并跨平台生成HTML。自定义内容和格式在过去,评估富文本编辑器就像比较所需格式的清单一样简单。一个好的RTF编辑器的标志就是它支持多少种格式。虽然这很重要,但是如果能够自定义内容和格式,那其扩展性将是无限的。使用方便所有这些好处都包含在...

阅读全文>>

0

The canvas has been tainted by cross-origin data

在前端调试canvas时,出现下面这个错误: Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at getImage (http://canvas/:400:39) at Image.localTest (http://canvas/:351:9) 字面翻译为“未能执行‘getImageData‘方法,由于这个canvas已经被污染了”。在...

阅读全文>>

0

适用于现代Web开发的超高性能专业级动画库——GSAP

介绍GSAP是一个JavaScript库,用于构建可在每种主流浏览器中使用的高性能动画。CSS动画,SVG,画布,React,Vue,WebGL,颜色,字符串,运动路径,通用对象... JavaScript可以接触的任何东西!ScrollTrigger插件可让你以最少的代码创建令人叹为观止的基于滚动的动画,GSAP解决了无数浏览器不一致的问题。以下是一个官方简短的视频介绍: ...

阅读全文>>

0

使用canvas在前端实现图片水印合成

图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在前端直接进行图片的合成。优点在于,响应更快,体验更好;如果是和文字进行合成,我们可以利用客户端字体,视觉展现效果更丰富;同时展示和合成全部都是前端完成,因此更利于维护。这里通过举个例子,演示如何在前端实现多个图片合成的效果,主要是借助HTML5 canvas相关技术。一、使用canvas在前端实现图片水印合成如果仅仅是普通的合成,例如一个底图和一个PNG水印图片合成,直接使用canvas的drawImage()方法即可,语法如下:context.dra...

阅读全文>>

0

超强 H5直播/点播播放器LivePlayer

之前有给大家分享2个超棒的视频播放器。今天继续分享一款高质量的H5视频播放器插件LivePlayer。HTML5 开源视频播放器DPlayerVue 视频播放组件Vue-CoreVideoPlayerliveplayer 一款集m3u8、rtmp、hls、flv于一身的H5视频流媒体播放器。使用简单,功能强大,免费使用。功能特点支持MP4播放;支持m3u8/HLS播放;支持HTTP-FLV/WS-FLV播放;支持RTMP播放;支持直播和点播播放;支持播放器快照截图;支持点播多清晰度播放;支持全屏或比例显示;自带的flash支持极速和流畅模式;自带的flash支持HTTP-FLV播放;自动检测I...

阅读全文>>

0

ES2020 新特性

这几年,Ecma TC39一年一次更新 ecmascript 规范标准,截止目前,以下特性已进入 finished 状态。现在带大家体验种草 ES2020 新特性。Promise.allSettledPromise.all 缺陷都知道 Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject),所有任务都会挂掉,Promise直接进入 reject 状态。想象这个场景:你的页面有三个区域,分别对应三个独立的接口数据,使用 Promise.all 来并发三个接口,如果其中任意一个接口服务异常,状态是reject,这会导致页面中该三个区域数据全都...

阅读全文>>

0

HTML5 绘图技术 「Canvas」和「SVG」

虽然是要Canvas和SVG,但每次提起Canvas,脑海总会想起SVG,因此先做个简单的对比。 *Canvas 和 SVG 对比 Canvas 和 SVG 都是 HTML5 中推荐的也是主要的2D图形绘制技术Canvas 提供画布标签和绘制API,技术比较新,注重栅格图像处理。SVG是一套独立的矢量图形语言,成为W3C标准已经有十几年,发展缓慢。Canvas 基于像素,提供 2D 绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图案;SVG为矢量图,提供一系列图形元素(Rect,Path,Circle,Line...);还有完整的动画,时间机制,本身就能独立使用,也可以嵌入...

阅读全文>>

0

掌握这8个CSS开发工具让你瞬间成为开发高手!还在等什么!

CSS是Web开发的基础之一。但是,我们中的一些人却感到非常困惑。这是因为我们没有遵循适当的学习流程,因此我们很难理解CSS的行为。本文旨在通过两种方式为你提供CSS的学习帮助:借助专用工具对CSS进行编码以及通过一些交互环境学习CSS。网上学习制作工具1、 EnjoyCSS地址:https://enjoycss.com/这个工具非常简单,是我们学习使用CSS时的救星。你可以使用一些简单的UI设计元素,然后通过这个工具将其转换为CSS代码。EnjoyCSS极大地改变了我的工作流程。由于易于使用,它使我花费在创建复杂CSS样式上的时间和精力减少了。不需要很深的背景就可以得到复杂的CSS效果。“ ...

阅读全文>>

0

可用于浏览器Web应用的终端组件——Xterm.js

介绍Xterm.js是一个用TypeScript编写的前端组件,它允许应用程序在浏览器中为用户提供功能齐全的终端。它被VS Code,Hyper和Theia等热门项目所使用。Github(7k stars)https://github.com/xtermjs/xterm.js组件特性终端应用程序正常工作:Xterm.js适用于大多数终端应用程序,如bash,vim和tmux,这包括对基于curses的应用程序和鼠标事件支持的支持Performant:Xterm.js 非常快,它甚至还包括一个GPU加速的渲染器丰富的 unicode 支持:支持CJK,表情符号和IME自包含:零依赖性可访问:可以...

阅读全文>>

1

Html5调用手机摄像头并实现人脸识别的实现

需求混合App开发,原生壳子+webApp,在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容,同时可以手动拍照并进行人脸识别,将识别结果显示在网页上。技术栈vue、Html5、video标签、Android、IOS、百度AI分析1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能2、video标签显示摄像头内容3、canvas标签获取图片4、将图像上传服务器,通过百度AI识别图片5、web显示识别结果核心代码1、调用系统原生摄像头功能并使用video标签显示html:<videoid="webcam"style="videoS...

阅读全文>>