首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS 图片压缩

    前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...this.fileName); a.click(); } } 将之前 canvas 生成的 base64 数据拆分后,通过 atob 方法解码 将解码后的数据转换成 Uint8Array 格式的无符号整形数组...Api 解析:Uint8Array new Uint8Array(length) length 创建初始化为 0 的,包含 length 个元素的无符号整型数组。

    34.5K21

    JS数组操作

    将数组扁平化并去除其中重复数据,最终得到一个升序且不重复的数组 var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [...flat(val) : val), []) } 4、数组合并 请把两个数组 [‘A1’, ‘A2’, ‘B1’, ‘B2’, ‘C1’, ‘C2’, ‘D1’, ‘D2’] 和 [‘A’, ‘B’, ‘...给定一个数组,将数组中的元素向右移动k个位置,其中k是非负数。...nums,编写一个函数将所有0移动到数组的末尾,同时保持非零元素的相对顺序 输入:[0, 1, 0, 3, 12] 输出:[1, 3, 12, 0, 0] 补充:必须在原数组上操作,不能拷贝额外的数组...// 方法1 // 排序数组,再从前往后遍历数组 // 当相邻两个值不相等的时候 len 指针移动 1 位 // 最终 len 的值即为新数组的大小 let removeDuplicates = nums

    11.6K10

    JS之数组

    大家好,我是萧寒,今日分享的是js中的数组。 JS之数组 为什么要学数组? 我们先来思考一个问题,如果我们想储存班级中47个学生的期末成绩,那么该如何存储呢?...什么是数组呢? 数组是一组数据的集合,其中的每个数据被称为元素,在数组中可以存放任意类型的元素,数组是一种将一组数据存储在单个变量名下的优雅方式。...我们能使用手机,电脑正是因为它们存在我们才有机会去使用,数组也是一样,要使用必须自己创建一个数组,在JS中创建数组有一下两种方式 利用new创建数组 利用数组字面量创建数组 利用new创建数组...在JS当中我们压根就不用关心这个问题,因为js的数组中可以存放任意类型的数据,例如字符串,数字,布尔值。 var arr=['小白',121,true,29.9]; //这就很舒服。...法一:修改length长度新增数组元素 可以通过修改length长度来实现数组扩容 length属性即可读 法二:通过修改数组索引新增数组元素 可以通过修改数组索引的方式追加数组元素 不能直接给数组名赋值

    7.9K20

    js数组笔记

    一、定义 数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始)。整个数组用方括号表示,数组的值用','分割;数组的数据可以是任何类型。...原数组会会变化,截取的部分自动为一个数组返回。...,对数组的每个值执行函数操作,并把结果返回新数组 1)原理:遍历数组,对函数的每个值执行回调函数,返回值组成一个新数组。...原数组不变 2)函数参数: element:数组当前项的值 index:数组当前项的索引(可选) array:数组对象本身(可选) thisArg:执行 callback 函数时使用的this 值(可选...,对数组每一个元素执行callback函数,并将满足条件的值返回新数组 1)原理:遍历数组,对数组每一个元素执行callback函数,并将满足条件的值返回新数组。

    15K30

    通过又拍云CDN+对象储存实现Z-Blog文件、图片的储存及网站静态加速!

    本文参加又拍云征文 本文需要准备 一、备案域名至少一个(因政策,又拍云接入的域名需备案) 二、Z-Blog博客程序站点 三、建议提前在又拍云完成小额的预付费充值(10元就差不多了) 一:Z-Blog程序博客系统图片托管又拍云对象储存...” 第三步:创建云储存服务 服务名称:服务名称仅限 5~20 位; 必须以小写英文字符开头,仅支持小写英文字符、数字、中划线组合 应用场景:因为是博客站点,没有较大的文件视频需求,所以我们选择“网页图片...TLS 1.3也推荐打开 成本控制:WebP自适应打开 如需使用图片云处理功能,请打开间隔标识符,选择使用“感叹号”标识符 第七步:获取操作员密码 点击右上角用户名,选择“账户管理” -> 选择“操作员...以后上传的图片、视频、文件等等内容均会上传到又拍云对象储存,并且在些文章使用的时候,从媒体库添加到文章会自动更换为又拍云对象储存的位置。这款插件配合又拍云服务,可以带来非常好的使用体验。...推荐缓存规则 第一步:创建CDN服务 服务名称:服务名称仅限 5~20 位; 必须以小写英文字符开头,仅支持小写英文字符、数字、中划线组合 应用场景:因为是博客站点,没有较大的文件视频需求,所以我们选择“网页图片

    5.7K20
    领券