![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js图片操作
图片操作
蓝格子.
这个作者很懒,什么都没留下…
展开
-
前端图片压缩(几乎无损)
前端经常会有图片压缩这样的需求,我尝试过很多种压缩方法,最后决定推荐lrz压缩方式lrz(file, [options]);1、file 通过 input:file 得到的文件,或者直接传入图片路径2、[options] 这个参数允许忽略3、width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。4、height {Number} 同上5、quality {Number} 图片压缩质量,取值 0 - 1,默认为0.7库的话直接去http://www.bejso原创 2020-12-03 19:58:25 · 6558 阅读 · 0 评论 -
gif转为帧(gif分解)加分解图片批量打包下载
用到的库:处理gif图:https://github.com/buzzfeed/libgif-js图片批量打包下载:https://github.com/dschwen/jsziphttps://github.com/eligrey/FileSaver.js用法:html<body> <p style="font-size: 28px; text-align: center;font-weight: bold;line-height: 46px;">在线GIF转成帧&原创 2020-12-10 15:29:17 · 1082 阅读 · 1 评论 -
前端gif压缩
一开始做这个需求的时候,我在网上看了好多在线压缩gif的工具,基本上都是后台实现的,没看到一个纯前端实现压缩的。只能自己想办法了,一开始我的思路是:方案一:将gif分解,得到一帧一帧的图片,然后将每帧的图片进行压缩,然后再合并成gif。方案二:将gif分解,然后抽帧,再合并。两种方案我都试过了,合并出来的gif图更大了,垃圾后面我只能去gifhub上找了,好不容易找到一个,地址我忘了,找不到了,压缩的js我上传到我的资源里(免费)gif.js是压缩库deal.js是下载方法有了这个库,实现过程就原创 2020-12-17 18:25:27 · 1426 阅读 · 11 评论 -
前端图片拼接
此处图片拼接分为横向拼接与纵向拼接,成品网站:https://www.onlinedo.cn/img-concat直接上代码:html<h1 class="mainIndex_title">图片拼接</h1><div class="imgConcat_main"> <div class="dragImgBox" id="dropZone">请拖拽本地图片文件到此处</div> <div class="imgConcat_bt原创 2021-01-07 20:22:17 · 1337 阅读 · 0 评论 -
canvas改变图片原始尺寸
原理:确定canvas画布大小,将图片画到画布上,然后导出图片,就这么简单画布大小,需要得到原始图片宽高比例,然后选择画布的宽计算出高代码:<div class="imagehandler_setting"> <span class="imagehandler_chooseFile">选择文件</span> <input id="upload-input" type="file" accept="image/*" style="display:原创 2021-01-11 10:19:13 · 3836 阅读 · 1 评论 -
js验证一张网络图片是否存在
记录:function checkImgExists(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image() ImgObj.src = imgurl ImgObj.onload = function(res) { resolve(res) } ImgObj.onerror = functi原创 2021-03-19 15:48:49 · 319 阅读 · 0 评论 -
puppeteer的使用,网页转长图和pdf
最近做网页转换成长图和pdf的功能,一开始准备canvas做转长图的功能,在当前网页操作是可行的,但是需求是需要可以截其他网站,想法是用iframe展示网站再进行截图,但是这是行不通的,一个跨域的问题就要搞死人,更何况就算截出来效果也是不是很好的,pdf功能还实现不了,最终是决定用puppeteerPuppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行Puppeteer 是 Node.js 工具引擎Puppeteer 提供了一原创 2021-03-19 16:20:20 · 1034 阅读 · 0 评论 -
简单的js图片加水印
简单的图片加水印原图:处理完的图片:直接贴代码,记录一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加水印</title></head><b原创 2021-04-22 20:24:07 · 632 阅读 · 2 评论 -
dom转图片
这段时间做了两个小功能,九宫格切图和九宫格拼图,这篇文章主要讲的就是我在九宫格拼图中遇到的问题:dom如何转成图片并下载。自己写?不可能的,这辈子都不可能自己写!一开始我用的是html2canvas,坑死人,不建议使用。推荐使用 domtoimage 地址:https://github.com/tsayen/dom-to-image使用:主要属性filter : 过滤器节点中默写不需要的节点;bgcolor : 图片背景颜色;height, width : 图片宽高;style :传入节原创 2021-06-02 11:49:40 · 2981 阅读 · 0 评论