作者： semlinker
转发链接：https://mp.weixin.qq.com/s/i3ynTtPJOECoAYfqHFoo3Q
目录推荐10个常用的图片处理小帮手（上）「值得收藏」 本篇
推荐10个常用的图片处理小帮手（下）「值得收藏」
前言本文给小伙伴们隆重介绍用于图片处理的十个 「“小帮手”」，他们各个身怀绝技，拥有模糊、压缩、裁剪、旋转、合成、比对等技能。相信认识他们之后，你将能够轻松应对大多数的图片处理场景。
该章节你将会学到以下知识：
如何区分图片的类型（可文件后缀名）；如何获取图片的尺寸（可右键查看图片信息）；如何预览本地图片（非图片阅读器）；如何实现图片压缩（非图片压缩工具）；如何操作位图像素数据（非 PS 等图片处理软件）；如何实现图片隐写（非肉眼可见）。十个图片处理 「“小帮手”」 已经已经迫不及待想与你见面，还在犹豫什么？赶紧出发吧！
「位图图像（bitmap），亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。」 这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。
「用数码相机拍摄的照片、扫描仪扫描的图片以及计算机截屏图等都属于位图。」 位图的特点是可以表现色彩的变化和颜色的细微过渡，产生逼真的效果，缺点是在保存时需要记录每一个像素的位置和颜色值，占用较大的存储空间。常用的位图处理软件有 Photoshop、Painter 和 Windows 系统自带的画图工具等。
分辨率是位图不可逾越的壁垒，在对位图进行缩放、旋转等操作时，无法生产新的像素，因此会放大原有的像素填补空白，这样会让图片显得不清晰。
（图片来源：https://zh.wikipedia.org/wiki/%E4%BD%8D%E5%9B%BE）
图中的小方块被称为像素，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。
可以将像素视为整个图像中不可分割的单位或者是元素。「不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在。」 每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小。
1.2 矢量图所谓矢量图，就是使用直线和曲线来描述的图形，构成这些图形的元素是一些点、线、矩形、多边形、圆和弧线等，「它们都是通过数学公式计算获得的，具有编辑后不失真的特点。」例如一幅画的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定画显示出的颜色。
「矢量图以几何图形居多，图形可以无限放大，不变色、不模糊。」 常用于图案、标志、VI、文字等设计。常用软件有：CorelDraw、Illustrator、Freehand、XARA、CAD 等。
这里我们以 Web 开发者比较熟悉的 SVG（「Scalable Vector Graphics —— 可缩放矢量图形」）为例，来了解一下 SVG 的结构：
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG 由 W3C 制定，是一个开放标准。
SVG 主要支持以下几种显示对象：
矢量显示对象，基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等；嵌入式外部图像，包括 PNG、JPEG、SVG 等；文字对象。了解完位图与矢量图的区别，下面我们来介绍一下位图的数学表示。
1.3 位图的数学表示位图的像素都分配有特定的位置和颜色值。每个像素的颜色信息由 RGB 组合或者灰度值表示。
根据位深度，可将位图分为1、4、8、16、24 及 32 位图像等。每个像素使用的信息位数越多，可用的颜色就越多，颜色表现就越逼真，相应的数据量越大。
「1.3.1 二值图像」
位深度为 1 的像素位图只有两个可能的值（黑色和白色），所以又称为二值图像。二值图像的像素点只有黑白两种情况，因此每个像素点可以由 0 和 1 来表示。
比如一张 4 4 二值图像：
1101110110001010
「1.3.2 RGB 图像」
RGB 图像由三个颜色通道组成，其中 RGB 代表红、绿、蓝三个通道的颜色。8 位/通道的 RGB 图像中的每个通道有 256 个可能的值，这意味着该图像有 1600 万个以上可能的颜色值。
有时将带有 8 位/通道（bpc）的 RGB 图像称作 24 位图像（8 位 x 3 通道 = 24 位数据/像素）。通常将使用 24 位 RGB 组合数据位表示的的位图称为真彩色位图。
RGB 彩色图像可由三种矩阵表示：一种代表像素中红色的强度，一种代表绿色，另一种代表蓝色。
（图片来源：https://freecontent.manning.com/the-computer-vision-pipeline-part-2-input-images/）
「图像处理的本质实际上就是对这些像素矩阵进行计算。」 其实位图中的图像类型，除了二值图像和 RGB 图像之外，还有灰度图像、索引图像和 YUV 图像。这里我们不做过多介绍，感兴趣的小伙伴，请自行查阅相关资料。
二、图片处理库2.1 AlloyImage❝
基于 HTML 5 的专业级图像处理开源引擎。
https://github.com/AlloyTeam/AlloyImage
❞
AlloyImage 基于 HTML5 技术的专业图像处理库，来自腾讯 AlloyTeam 团队。它拥有以下功能特性：
基于多图层操作 —— 一个图层的处理不影响其他图层；与 PS 对应的 17 种图层混合模式 —— 便于 PS 处理教程的无缝迁移；多种基本滤镜处理效果 —— 基本滤镜不断丰富、可扩展；基本的图像调节功能 —— 色相、饱和度、对比度、亮度、曲线等；简单快捷的 API —— 链式处理、API 简洁易用、传参灵活；多种组合效果封装 —— 一句代码轻松实现一种风格；接口一致的单、多线程支持 —— 单、多线程切换无需更改一行代码，多线程保持快捷 API 特性。对于该库 AlloyTeam 团队建议的使用场景如下：
桌面软件客户端内嵌网页运行方式 >>> 打包 Webkit 内核：用户较大头像上传风格处理、用户相册风格处理（处理时间平均 < 1s）；Win8 Metro 应用 >>> 用户上传头像，比较小的图片风格处理后上传（Win8 下 IE 10 支持多线程）；Mobile APP >>> Andriod 平台、iOS 平台小区风格 Web 处理的需求，如 PhoneGap 应用，在线头像上传时的风格处理、Mobile Web 端分享图片时风格处理等。「使用示例」
//$AI或AlloyImage初始化一个AlloyImage对象varps=$AI(img,600).save('jpg',0.6);//save将合成图片保存成base64格式字符串varstring=AlloyImage(img).save('jpg',0.8);//saveFile将合成图片下载到本地img.onclick=function(){AlloyImage(this).saveFile('处理后图像.jpg',0.8);}
「在线示例」
❝
http://alloyteam.github.io/AlloyImage/
❞
（图片来源：http://alloyteam.github.io/AlloyImage/）
2.2 blurify❝
blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from css mode to canvasmode.
https://github.com/JustClear/blurify
❞
blurify.js 是一个用于图片模糊，很小的 JavaScript 库（约 2 kb），并支持从 CSS 模式到 Canvas 模式的优雅降级。该插件支持三种模式：
css 模式：使用 filter 属性，默认模式；canvas 模式：使用 canvas 导出 base64；auto 模式：优先使用 css 模式，否则自动切换到 canvas 模式。「使用示例」
importblurifyfrom'blurify';newblurify({images:document.querySelectorAll('.blurify'),blur:6,mode:'css',});//orinshorthandblurify(6,document.querySelectorAll('.blurify'));
「在线示例」
❝
https://justclear.github.io/blurify/
❞
（图片来源：https://justclear.github.io/blurify/）
看到这里是不是有些小伙伴觉得只是模糊处理而已，觉得不过瘾，能不能来点更酷的。嘿嘿，有求必应！
阿宝哥立马来个 「“酷炫叼”」 地库 —— midori，该库用于为背景图创建动画，使用 three.js 编写并使用 WebGL。本来是想给个演示动图，无奈单个 Gif 文件太大，只能放个体验地址，感兴趣的小伙伴自行体验一下。
❝
midori 示例地址：https://aeroheim.github.io/midori/
❞
2.3 cropperjs❝
JavaScript image cropper.
https://github.com/fengyuanchen/cropperjs
❞
Cropper.js 是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括 IE9 以上的现代浏览器。它可以用于满足诸如裁剪头像上传、商品图片编辑之类的需求。
Cropper.js 支持以下特性：
支持 39 个配置选项；支持 27 个方法；支持 6 种事件；支持 touch（移动端）；支持缩放、旋转和翻转；支持在画布上裁剪；支持在浏览器端通过画布裁剪图像；支持处理 Exif 方向信息；跨浏览器支持。❝
可交换图像文件格式（英语：Exchangeable image file format，官方简称 Exif），是专门为数码相机的照片设定的文件格式，可以记录数码照片的属性信息和拍摄数据。Exif 可以附加于 JPEG、TIFF、RIFF 等文件之中，为其增加有关数码相机拍摄信息的内容和索引图或图像处理软件的版本信息。
Exif 信息以 0xFFE1 作为开头标记，后两个字节表示 Exif 信息的长度。所以 Exif 信息最大为 64 kB，而内部采用 TIFF 格式。
❞
「使用示例」
//import'cropperjs/dist/cropper.css';importCropperfrom'cropperjs';constimage=document.getElementById('image');constcropper=newCropper(image,{aspectRatio:16/9,crop(event){console.log(event.detail.x);console.log(event.detail.y);console.log(event.detail.width);console.log(event.detail.height);console.log(event.detail.rotate);console.log(event.detail.scaleX);console.log(event.detail.scaleY);},});
「在线示例」
❝
https://fengyuanchen.github.io/cropperjs/
❞
2.4 compressorjs❝
JavaScript image compressor.
https://github.com/fengyuanchen/compressorjs
❞
compressorjs 是 JavaScript 图像压缩器。使用浏览器原生的 canvas.toBlob API 进行压缩工作，这意味着它是有损压缩。通常的使用场景是，在浏览器端图片上传之前对其进行预压缩。
在浏览器端要实现图片压缩，除了使用 canvas.toBlob API 之外，还可以使用 Canvas 提供的另一个 API，即 toDataURL API，它接收 type 和encoderOptions 两个可选参数。
其中 type 表示图片格式，默认为 image/png。而 encoderOptions用于表示图片的质量，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92，其他参数会被忽略。
相比 canvas.toDataURL API 来说，canvas.toBlob API 是异步的，因此多了个 callback 参数，这个 callback 回调方法默认的第一个参数就是转换好的 blob 文件信息。canvas.toBlob 的签名如下：
canvas.toBlob(callback,mimeType,qualityArgument)
「使用示例」
importaxiosfrom'axios';importCompressorfrom'compressorjs';//<inputtype="file"id="file"accept="image/">document.getElementById('file').addEventListener('change',(e)=>{constfile=e.target.files[0];if(!file){return;}newCompressor(file,{quality:0.6,success(result){constformData=newFormData();//ThethirdparameterisrequiredforserverformData.append('file',result,result.name);//SendthecompressedimagefiletoserverwithXMLHttpRequest.axios.post('/path/to/upload',formData).then(()=>{console.log('Uploadsuccess');});},error(err){console.log(err.message);},});});
「在线示例」
❝
https://fengyuanchen.github.io/compressorjs/
❞
2.5 fabric.js❝
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser.
https://github.com/fabricjs/fabric.js
❞
Fabric.js 是一个框架，可让你轻松使用 HTML5 Canvas 元素。它是一个位于 Canvas 元素之上的交互式对象模型，同时也是一个 「SVG-to-canvas」的解析器。
使用 Fabric.js，你可以在画布上创建和填充对象。所谓的对象，可以是简单的几何形状，比如矩形，圆形，椭圆形，多边形，或更复杂的形状，包含数百或数千个简单路径。然后，你可以使用鼠标缩放，移动和旋转这些对象。并修改它们的属性 —— 颜色，透明度，z-index 等。此外你还可以一起操纵这些对象，即通过简单的鼠标选择将它们分组。
Fabric.js 支持所有主流的浏览器，具体的兼容情况如下：
Firefox 2+Safari 3+Opera 9.64+Chrome（所有版本）IE10，IE11，Edge「使用示例」
<!DOCTYPEhtml><html><head></head><body><canvasid="canvas"width="300"height="300"></canvas><scriptsrc="lib/fabric.js"></script><script>varcanvas=newfabric.Canvas('canvas');varrect=newfabric.Rect({top:100,left:100,width:60,height:70,fill:'red'});canvas.add(rect);</script></body></html>
「在线示例」
❝
http://fabricjs.com/kitchensink
❞
（图片来源：https://github.com/fabricjs/fabric.js）
2.6 Resemble.js❝
Image analysis and comparison
https://github.com/rsmbl/Resemble.js
❞
Resemble.js 使用 HTML Canvas 和 JavaScript 来实现图片的分析和比较。兼容大于 8.0 的 Node.js 版本。
「使用示例」
//比较两张图片vardiff=resemble(file).compareTo(file2).ignoreColors().onComplete(function(data){console.log(data);/{misMatchPercentage:100,//%isSameDimensions:true,//orfalsedimensionDifference:{width:0,height:-1},getImageDataUrl:function(){}}/});
「在线示例」
❝
http://rsmbl.github.io/Resemble.js/
❞
2.7 Pica❝
Resize image in browser with high quality and high speed
https://github.com/nodeca/pica
❞
Pica 可用于在浏览器中调整图像大小，没有像素化并且相当快。它会自动选择最佳的可用技术：webworkers，webassembly，createImageBitmap，纯 JS。
借助 Pica，你可以实现以下功能：
减小大图像的上传大小，节省上传时间；在图像处理上节省服务器资源；在浏览器中生成缩略图。「使用示例」
constpica=require('pica')();//调整画布/图片的大小pica.resize(from,to,{unsharpAmount:80,unsharpRadius:0.6,unsharpThreshold:2}).then(result=>console.log('resizedone!'));//调整大小并转换为Blobpica.resize(from,to).then(result=>pica.toBlob(result,'image/jpeg',0.90)).then(blob=>console.log('resizedtocanvas&createdblob!'));
「在线示例」
❝
http://nodeca.github.io/pica/demo/
❞
2.8 tui.image-editor❝
Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
https://github.com/nhn/tui.image-editor
❞
tui.image-editor 是使用 HTML5 Canvas 的全功能图像编辑器。它易于使用，并提供强大的过滤器。同时它支持对图像进行裁剪、翻转、旋转、绘图、形状、文本、遮罩和图片过滤等操作。
tui.image-editor 的浏览器兼容情况如下：
ChromeEdgeSafariFirefoxIE 10+「使用示例」
//ImageeditorvarimageEditor=newtui.ImageEditor("#tui-image-editor-container",{includeUI:{loadImage:{path:"img/sampleImage2.png",name:"SampleImage",},theme:blackTheme,//orwhiteThemeinitMenu:"filter",menuBarPosition:"bottom",},cssMaxWidth:700,cssMaxHeight:500,usageStatistics:false,});window.onresize=function(){imageEditor.ui.resizeEditor();};
在线示例
❝
https://ui.toast.com/tui-image-editor/
❞
2.9 gif.js❝
JavaScript GIF encoding library
https://github.com/jnordberg/gif.js
❞
gif.js 是运行在浏览器端的 JavaScript GIF 编码器。它使用类型化数组和 Web Worker 在后台渲染每一帧，速度真的很快。该库可工作在支持：Web Workers，File API 和 Typed Arrays 的浏览器中。
gif.js 的浏览器兼容情况如下：
Google ChromeFirefox 17Safari 6Internet Explorer 10Mobile Safari iOS 6「使用示例」
vargif=newGIF({workers:2,quality:10});//addanimageelementgif.addFrame(imageElement);//oracanvaselementgif.addFrame(canvasElement,{delay:200});//orcopythepixelsfromacanvascontextgif.addFrame(ctx,{copy:true});gif.on('finished',function(blob){window.open(URL.createObjectURL(blob));});gif.render();
「在线示例」
❝
http://jnordberg.github.io/gif.js/
❞
本篇文章未完结，请见下一篇
推荐JavaScript经典实例学习资料文章《JavaScript 中ES6代理的实际用例》
《12 个实用的前端开发技巧总结》
《一文带你搞懂搭建企业级的 npm 私有仓库》
《教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？》
《细说前端开发UI公共组件的新认识「实践」》
《细说DOM API中append和appendChild的三个不同点》
《细品淘系大佬讲前端新人如何上王者「干货」》
《一文带你彻底解决背景跟随弹窗滚动问题「干货」》
《推荐常用的5款代码比较工具「值得收藏」》
《Node.js实现将文字与图片合成技巧》
《爱奇艺云剪辑Web端的技术实现》
《我再也不敢说我会写前端 Button组件「实践」》
《NodeX Component - 滴滴集团 Node.js 生态组件体系「实践」》
《Node Buffers 完整指南》
《推荐18个webpack精美插件「干货」》
《前端开发需要了解常用7种JavaScript设计模式》
《浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务》
《了不起的 Webpack HMR 学习指南（上）「含源码讲解」》
《了不起的 Webpack HMR 学习指南（下）「含源码讲解」》
《10个打开了我新世界大门的 WebAPI（上）「实践」》
《10个打开了我新世界大门的 WebAPI（中）「实践」》
《10个打开了我新世界大门的 WebAPI（下）「实践」》
《「图文」ESLint 在中大型团队的应用实践》
《Deno是代码的浏览器，你认同吗？》
《前端存储除了 localStorage 还有啥？》
《Javascript 多线程编程的前世今生》
《微前端方案 qiankun（实践及总结）》
《「图文」V8 垃圾回收原来这么简单？》
《Webpack 5模块联邦引发微前端的革命？》
《基于 Web 端的人脸识别身份验证「实践」》
《「前端进阶」高性能渲染十万条数据(时间分片)》
《「前端进阶」高性能渲染十万条数据(虚拟列表)》
《图解 Promise 实现原理（一）：基础实现》
《图解 Promise 实现原理（二）：Promise 链式调用》
《图解 Promise 实现原理（三）：Promise 原型方法实现》
《图解 Promise 实现原理（四）：Promise 静态方法实现》
《实践教你从零构建前端 Lint 工作流「干货」》
《高性能多级多选级联组件开发「JS篇」》
《深入浅出讲解Node.js CLI 工具最佳实战》
《延迟加载图像以提高Web网站性能的五种方法「实践」》
《比较 JavaScript 对象的四种方式「实践」》
《使用Service Worker让你的 Web 应用如虎添翼（上）「干货」》
《使用Service Worker让你的 Web 应用如虎添翼（中）「干货」》
《使用Service Worker让你的 Web 应用如虎添翼（下）「干货」》
《前端如何一次性处理10万条数据「进阶篇」》
《推荐三款正则可视化工具「JS篇」》
《如何让用户选择是否离开当前页面？「JS篇」》
《JavaScript开发人员更喜欢Deno的五大原因》
《仅用18行JavaScript实现一个倒数计时器》
《图文细说JavaScript 的运行机制》
《一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索》
《推荐Web程序员常用的15个源代码编辑器》
《10个实用的JS技巧「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》
《深入JavaScript教你内存泄漏如何防范》
《手把手教你7个有趣的JavaScript 项目-上「附源码」》
《手把手教你7个有趣的JavaScript 项目-下「附源码」》
《JavaScript 使用 mediaDevices API 访问摄像头自拍》
《手把手教你前端代码如何做错误上报「JS篇」》
《一文让你彻底搞懂移动前端和Web 前端区别在哪里》
《63个JavaScript 正则大礼包「值得收藏」》
《提高你的 JavaScript 技能10 个问答题》
《JavaScript图表库的5个首选》
《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》
《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》
《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》
《可视化的 js：动态图演示 Promises & Async/Await 的过程》
《原生JS封装拖动验证滑块你会吗？「实践」》
《如何实现高性能的在线 PDF 预览》
《细说使用字体库加密数据-仿58同城》
《Node.js要完了吗？》
《Pug 3.0.0正式发布，不再支持 Node.js 6/8》
《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》
《JavaScript 20 年 中文版之创立标准》
《值得收藏的前端常用60余种工具方法「JS篇」》
《箭头函数和常规函数之间的 5 个区别》
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「前端篇」不再为正则烦恼》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《深入细品浏览器原理「流程图」》
《JavaScript 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《前端必备基础知识：window.location 详解》
《不要再依赖CommonJS了》
《犀牛书作者：最该忘记的JavaScript特性》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《Node + H5 实现大文件分片上传、断点续传》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的 JavaScript 模块化方案和工具》
《「前端进阶」JS中的内存管理》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道JavaScript 面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道 JavaScript知识点汇总（一）》
《关于前端174道 JavaScript知识点汇总（二）》
《关于前端174道 JavaScript知识点汇总（三）》
《几个非常有意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript 装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结（上）【实践】》
《70个JavaScript知识点详细总结（下）【实践】》
《开源了一个 JavaScript 版敏感词过滤库》
《送你 43 道 JavaScript 面试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推荐7个很棒的JavaScript产品步骤引导库》
《Echa哥教你彻底弄懂 JavaScript 执行机制》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《JavaScript 工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新方式》
《Three.js 动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解 js 深拷贝 vs 浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS 异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS 经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的 JS 写得更漂亮》
《恭喜你获得治疗JS this的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
《Jquery插件（常用的插件库）》
《【JS】如何防止重复发送ajax请求》
《JavaScript+Canvas实现自定义画板》
《Continuation 在 JS 中的应用「前端篇」》
作者： semlinker
转发链接：https://mp.weixin.qq.com/s/i3ynTtPJOECoAYfqHFoo3Q
