9个JavaScript图像处理库,收藏好留备用

1:pica
一个在浏览器中调整图像大小,而不会出现像素失真,处理速度非常快的图片处理库

此插件可帮助你减小大图像的上传文件大小,从而节省上传时间。使你可以在浏览器中调整图像大小,而不会出现像素化并且相当快。它会从网络工作者,网络程序集,createImageBitmap和纯JS中自动选择最佳的可用技术。

Demo:http://nodeca.github.io/pica/demo/
Github:https://github.com/nodeca/pica

2:html2canvas
一个强大的使用js开发的浏览器网页截图工具

html2canvas 使你可以直接在用户浏览器上截取网页或部分网页的“屏幕快照”。屏幕截图基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上可用的信息来构建屏幕截图。

Demo:http://html2canvas.hertzen.com/
Github:https://github.com/niklasvh/html2canvas
star:23.4k

3:Lena.js
一个轻量级的可以给你图像加各种滤镜的js库
Lena.js是一个用于图像处理的微型库。它允许你将一些基本的图像过滤器应用于文档中的图像。你可以从项目中包含Lena.js的本地副本, 也可以使用CDN或本地副本:
Demo:https://fellipe.com/demos/lena-js/
Github:https://github.com/davidsonfellipe/lena.js

4:Compressor.js
一个使用本地canvas.toBlob API进行图像有损压缩的js库

这是一个简单的JS图像压缩器,它使用浏览器的本机canvas.toBlob API来处理图像压缩。这使你可以将其压缩输出,质量设置为0到1。

Demo:https://fengyuanchen.github.io/compressorjs/
Github:https://github.com/fengyuanchen/compressorjs

5:cropperjs
一款强大的图片裁切库, 支持灵活的图片裁切方式
该插件是一个简单的JavaScript图像裁剪器,可让你在交互式环境中裁剪,旋转,缩放和缩放图像。它还允许设置纵横比。

Demo:https://fengyuanchen.github.io/cropperjs/
Github:https://github.com/fengyuanchen/cropperjs
star:9.3k

6:merge-images
一个将多张图片合并成一张图的js插件,该库可以帮助你轻松地将图像合成在一起,而不会弄乱画布。

Github:https://github.com/lukechilds/merge-images
star:1.2k

7:Grade
Grade 是一个 JavaScript 库,作用是从图像中提取前2个主要颜色产生互补的渐变。
Demo:https://benhowdle89.github.io/grade/
Github:https://github.com/benhowdle89/grade
star:3.6k

8:Fabric.js
Fabric.js 是一个在服务器端运行的 Node.js 扩展模块,用于在Web上绘制各种图形的 JS 库。

Demo:http://fabricjs.com/
Github:https://github.com/fabricjs/fabric.js
star:18.7k

9:dom-to-image
一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库
官网:https://www.marvinj.org/en/index.html
Github:https://github.com/gabrielarchanjo/marvinj

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
第一部分 JavaScript入门 1 第1章 编写第一JavaScript程序 1 1.1 编程简介 1 什么是计算机程序 2 1.2 如何把JavaScript添加到页面 3 外部JavaScript文件 5 1.3 第一JavaScript程序 7 1.4 把文本写到Web页面上 9 1.5 附件外部JavaScript文件 10 1.6 追踪错误 12 1.6.1 Firefox JavaScript控制台 13 1.6.2 显示Internet Explorer错误对话框 14 1.6.3 访问Safari错误控制台 15 第2章 JavaScript的语法 16 2.1 语句 16 2.2 命令 16 2.3 数据类型 17 2.3.1 数值 17 2.3.2 字符串 18 2.3.3 Boolean 19 2.4 变量 19 2.4.1 创建变量 20 2.4.2 使用变量 22 2.5 操作数据类型和变量 23 2.5.1 基本算术 24 2.5.2 操作的顺序 25 2.5.3 组合字符串 25 2.5.4 组合数值和字符串 26 2.5.5 修改变量中的值 27 2.6 教程:使用变量创建消息 28 2.7 教程:请求信息 30 2.8 数组 32 2.8.1 创建数组 32 2.8.2 访问数组中的项目 34 2.8.3 向数组添加项目 35 2.8.4 从数组删除项目 37 2.8.5 使用splice( )添加和删除 38 2.9 教程:编写使用数组的页面 40 2.10 注释 42 2.10.1 何时使用注释 43 2.10.2 本书中的注释 44 第3章 为程序添加逻辑和控制 45 3.1 使程序智能地响应 45 3.1.1 条件语句基础 46 3.1.2 添加备用计划 49 3.1.3 测试多条件 49 3.1.4 更复杂的条件 51 3.1.5 嵌套条件语句 53 3.1.6 编写条件语句的技巧 54 3.2 教程:使用条件语句 55 3.3 使用循环处理重复性任务 58 3.3.1 while循环 58 3.3.2 循环和数组 60 3.3.3 for循环 61 3.3.4 do/while循环 63 3.4 函数:把有用的代码转换为可复用的命令 64 3.4.1 小教程 66 3.4.2 给函数提供信息 67 3.4.3 从函数获取信息 69 3.4.4 防止变量冲突 70 3.5 教程:一简单测验 72 第4章 操作字符串、数值和日期 77 4.1 快速对象介绍 78 4.2 字符串 80 4.2.1 确定字符串的长度 80 4.2.2 改变字符串的大小写 80 4.2.3 查找一字符串:indexOf( )技术 81 4.2.4 使用slice( )提取字符串的一部分 83 4.3 在字符串中查找模式 84 4.3.1 创建和使用基本的正则表达式 84 4.3.2 构建一正则表达式 85 4.3.3 分组正则表达式的部分 88 4.3.4 有用的正则表达式 89 4.3.5 匹配模式 94 4.3.6 替换文本 96 4.3.7 尝试正则表达式 97 4.4 数值 97 4.4.1 把字符串改变为数值 97 4.4.2 测试数值 99 4.4.3 舍入数值 100 4.4.4 格式化货币值 100 4.4.5 创建随机数 101 4.5 日期和时间 103 4.5.1 获取月份 103 4.5.2获取星期几 104 4.5.3 获取时间 105 4.5.4 创建当前日期之外的日期 108 4.6 教程 109 4.6.1 概览 109 4.6.2 编写函数 110 第5章 动态修改Web页面 115 5.1 修改Web页面:概览 116 5.2 理解文档对象模型 117 5.2.1 选择页面元素 118 5.2.2 给页面添加内容 122 5.2.3 再谈月球测验 123 5.2.4 DOM的问题 126 5.3 JavaScript简介 127 初学jQuery 128 5.4 再谈选择页面元素 129 5.4.1 基本选择器 130 5.4.2 高级选择器 133 5.4.3 jQuery过滤器 135 5.4.4 理解jQuery选择 136 5.5 向页面添加内容 138 替换和删除选择 141 5.6 设置和读取标签属性 142 5.6.1 类 142 5.6.2 读取和改变CSS属性 143 5.6.3 一次改变多CSS属性 145 5.7 读取、设置和删除HTML属性 146 5.8 创意标题 147 5.9 操作选择中的每元素 149 5.9.1 匿名函数 150 5.9.2 this和$(this) 150 5.10 自动提取引用 152 5.10.1 概览 152 5.10.2 编程 153 第6章 动作/响应:让页面通过事件活动起来 156 6.1 什么是事件 156 6.1.1 鼠标事件 158 6.1.2 文档/窗口事件 159 6.1.3 表单事件 160 6.1.4 键盘事件 160 6.2 把函数和事件一起使用 161 6.2.1 内联事件 161 6.2.2 传统模型 162 6.2.3 现代方式 163 6.2.4 jQuery方式 164 6.3 教程:突出显示表格行 167 6.4 更多的jQuery事件概念 171 6.4.1 等待HTML载入 171 6.4.2 jQuery事件 173 6.4.3 事件对象 175 6.4.4 阻止事件的常规行为 176 6.4.5 删除事件 177 6.5 高级事件管理 178 6.6 教程:一页的FAQ 180 6.6.1 任务概览 180 6.6.2 编程 180 第7章 改进图像 184 7.1 交换图像 184 7.1.1 改变图像的src属性 184 7.1.2 预载入图像 186 7.1.3 翻滚图像 187 7.2 教程:添加翻滚图像 188 7.2.1 任务概览 189 7.2.2 编程 189 7.3 jQuery效果 192 7.3.1 基本显示和隐藏 193 7.3.2 淡入淡出元素 194 7.3.3 滑动元素 195 7.3.4 动画 195 7.4 教程:带有效果的照片集 197 7.4.1 任务概览 197 7.4.2 编程 198 7.5 使用jQuery lightBox的高级照片集 201 7.5.1 基础 202 7.5.2 定制lightBox 204 7.6 教程:lightBox照片集 207 7.7 使用Cycle实现幻灯片动画 209 7.7.1 基础 209 7.7.2 定制Cycle插件 211 7.8 教程:一自动的幻灯片 214 第二部分 构建Web页面功能 218 第8章 改进导航 218 8.1 一些链接基础知识 218 8.1.1 用JavaScript选择链接 218 8.1.2 确定链接的目标 219 8.1.3 不要打开链接 220 8.2 在新窗口中打开外部链接 221 8.3 创建新窗口 224 窗口属性 224 8.4 在页面上的一窗口中打开页面 228 8.4.1 定制Greybox窗口的外观 231 8.4.2 教程:在页面中打开一页面 232 8.5 教程:生成较大链接 235 8.5.1 概览 235 8.5.2 编程 237 8.6 实现导航菜单动画 241 8.6.1 HTML 242 8.6.2 CSS 243 8.6.3 JavaScript 243 8.6.4 教程 244 第9章 扩展Web表单 247 9.1 理解表单 248 9.1.1 选择表单元素 249 9.1.2 获取和设置表单元素的值 251 9.1.3 确定按钮和选框是否选中 252 9.1.4 表单事件 253 9.2 为表单添加智能 257 9.2.1 聚焦表单的第一字段 257 9.2.2 关闭或打开字段 258 9.2.3 隐藏和显示表单选项 260 9.3 教程:基本表单扩展 260 9.3.1 聚焦到一字段 261 9.3.2 关闭表单字段 261 9.3.3 隐藏表单字段 265 9.4 表单验证 266 9.4.1 jQuery Validation插件 267 9.4.2 基本验证 269 9.4.3 高级验证 271 9.4.4 样式化错误消息 277 9.5 验证教程 278 9.5.1 基本验证 278 9.5.2 高级验证 280 9.5.3 验证复选框和单选按钮 283 9.5.4 格式化错误消息 286 第10章 扩展界面 287 10.1 使用折叠面板隐藏信息 287 10.1.1 定制Accordion 290 10.1.2 折叠教程 293 10.2 把信息组织到标签页面板 295 10.2.1 格式化标签页和面板 298 10.2.2 定制Tabs插件 300 10.2.3 标签页面板教程 302 10.3 工具提示 305 10.3.1 使用title属性的工具提示 306 10.3.2 使用其他Web页面的工具提示 308 10.3.3 使用隐藏内容的工具提示 309 10.3.4 控制工具提示的显示 311 10.3.5 格式化工具提示 315 10.3.6 Cluetip教程 316 10.4 创建可排序表格 321 10.4.1 样式化表格 324 10.4.2 Tablesorter教程 325 第三部分 Ajax:与Web服务器通信 327 第11章 初识Ajax 327 11.1 什么是Ajax 328 11.2 Ajax基础知识 329 11.2.1 拼图块 329 11.2.2 和Web服务器通信 331 11.3 Ajax的jQuery方式 334 11.3.1 使用load( )函数 335 11.3.2 教程:load( )函数 336 11.3.3 get( )和post( )函数 339 11.3.4 格式化发送给服务器的数据 341 11.3.5 处理来自服务器的数据 343 11.3.6 教程:使用get( )函数 347 11.4 JSON 351 11.4.1 访问JSON数据 353 11.4.2 复杂的JSON对象 354 第12章 Ajax编程基础 357 12.1 Tabs插件 357 12.1.1 改变正在加载文本和图标 359 12.1.2 Ajax标签页教程 361 12.2 向站点添加Google地图 364 12.2.1 为地图设定位置 366 12.2.2 其他jMaps选项 367 12.2.3 添加标志和HTML提示提示框 369 12.2.4 获取驱车指示 370 12.2.5 jMaps教程 371 第四部分 除错、提示和技巧 377 第13章 除错和调试 377 13.1 常见JavaScript编程错误 377 13.1.1 没有结束符号 377 13.1.2 引号 381 13.1.3 使用保留字 382 13.1.4 条件语句中的单等号 383 13.1.5 区分大小写 384 13.1.6 外部JavaScript文件的路径不正确 384 13.1.7 外部JavaScript文件中的不正确路径 385 13.1.8 消失的变量和函数 386 13.2 使用Firebug调试 387 13.2.1 安装并打开Firebug 387 13.2.2 用Firebug查看错误 388 13.2.3 使用console.log( )记录脚本过程 389 13.2.4 教程:使用Firebug控制台 390 13.2.5 更强大的调试 393 13.3 调试教程 397 第14章 深入JavaScript 401 14.1 综合应用 401 使用外部JavaScript文件 401 14.2 编写更高效的JavaScript 403 14.2.1 优先使用变量 403 14.2.2 三元操作符 405 14.2.3 switch语句 406 14.2.4 高效地使用jQuery对象 409 14.3 创建快速载入的JavaScript 410 14.3.1 在Windows下使用YUI Compressor 411 14.3.2 在Mac下使用YUI Compressor 412 第五部分 附录 413 附录A JavaScript资源 413
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值