vue如何利用js等比压缩图片
这篇文章介绍的内容是关于vue如何利用js等比压缩图片，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下近做一个旅游项目 大家都知道旅游项目图片居多 1.在项目中由于图片尺寸过大 再加上给图片设置了宽高导致图片压缩严重
下面我给大家看一下原图
2. 设置图片的方式有很多种 可以通过背景图来设置background；在项目中一些小图片建议使用字体图标代替？
3.下面给大家展示设置宽高的图片
已经远远看到图片已经变形了
4. 在网上看了一些资料结合自己需要的效果 实现了一下
虽然还是有些误 但是只要后台设置上传图片规格 对我们压缩图片的效果有很大好处
附上代码 （有更好的方法请一起交流）
相关：
js中怎么把本是长方形图片压缩成梯形图片，我想做出一个立体的图片转换效果出来？？？求各位大神指点
郭敦顒回答：
这可能是一项尚未涉及到的等变形技术——
把本是长方形图片压缩成梯形图片，按其一半设定为正方形，等价于压缩一边为直角梯形，按对称性展开即为等边梯形了。
设正方形边长为10cm,400万像素图片，那么每边有2000个（严格说是2001个）等分点，划平行线，将图片分成400万个小方格，这小方格即为像素。每个小方格的边长则为10cm/2000=50mm/1000=50μm（微米）。
如果把上方格宽度尺寸由50μm改为40μm向下依次递增到50μm，上尺度是一个等数列，项数为2000，首项为40μm，末项为50μm。
如此变形，即可把本是长方形图片压缩成梯形图片。
在实用上可利用视线物像的大小与距离成反比（αf=ζ, α—物像尺寸，f—距离， ζ为常数）这一原理，通过照相，把图片斜放或斜照，即可将本是长方形图片改变成梯形图片了。《几何原本》一书的封面原为长方形的，通过这种摄像，封面变成了梯形。
非常遗憾的是图片不能上传了，已有十几天。此种摄像方法，你若能用得上，可看看效果。
在摄影棚中的一些特技摄影，应该会有这方面的运用。
js如何实现将上传图片并且压缩的方法
这篇文章给大家介绍的内容是关于js上传图片压缩，有着一定的参考价值，有需要的朋友可以参考一下。
js实现图片压缩后上传用到的技术:
canvas相关api
html5的一些api
兼容性:
h5没发现问题,pc低版本浏览器不支持实现思路:
监听文件域的上传,通过FileReader api获取到图片的原始数据
计算压缩后的宽高,然后通过画到canvas上在截取出压缩后的数据
如何实现JS中图片压缩方法
本文主要介绍JS中图片压缩的方法，包括等比压缩图片的方法,需要的朋友可以参考下，希望能帮助到大家。
大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；面对这么多的需求，索性画了一张图：
Alt text
二、解决办法
如上图所示，王二一共写了七个方法，基本覆盖了JS中大部分文件类型的转换与压缩，其中：
1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数，代码如下： 2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下：
3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数;代码如下： 这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JaScript 原生形式的数据。 File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档
4、 canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量;代码如下： 其中的 toDataURL API可以参考MDN文档
5、 filetoDataURL(file,fn) 会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下： 6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：
7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下： 三、进一步封装
对于常用的将一个 File 对象压缩之后再变为 File 对象,我们可以将上面的方法再封装一下，参考如下代码： 其中， file 参数传入一个 File （ Blob ）类型文件； quality 参数传入一个 0-1 的 number 类型，表示图片压缩质量； fn 为回调方法，包含一个 Blob 类型文件的参数。
它使用起来就像下面这样： 这样的话，图片压缩上传就能轻松地搞定了，以上的8个方法我已经封装好放到 github 上了，喜欢的话可以使劲的star哈。
参考文档：
MDN
ps：下面看下JS等比压缩图片的办法
lrz.js quality 设置多大
quality:0.7, //图片压缩质量，取值 0 - 1，默认为 0.7
lrz(file,{
width:800, //设置图片压缩后的宽度，默认为原图宽度
height:600, //同上
quality:0.7, //图片压缩质量，取值 0 - 1，默认为 0.7
fieldName:"aijquery" //后端接收的字段名，默认：file,一般不用这项，我们要上传数据的话，可以自定义FormData对象
}).then(function(rst){
rst.formData //后端可处理的数据
rst.file //压缩后的file对象，如果压缩率太低，将会是原始file对象
rst.fileLen //压缩后的图片的大小，
rst.base64 //生成后的图片base64，后端可以处理此字符串为图片，也可以直接用于 img.src = base64
rst.base64Len //生成后的base64的大小，后端可以通过此值来校验是否传输完整
rst.origin //原始的file对象，里面存放了一些原始文件的信息，例如大小、日期等
}).catch(function(err){ //处理失败后执行
}).always(function(){ //必然执行
});
在js中如何实现上传并压缩图片功能（详细教程）
这篇文章主要为大家详细介绍了js实现上传并压缩图片的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现上传并图片压缩的具体代码，供大家参考，具体内容如下
代码：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何搭建element-ui（详细教程）
在Vue2模板中如何使用template
在Vue中如何创建组件
在Vue-cli中使用Eslint如何实现自动格式化
在ES6中子组件调用父组件使用方法
在angular中如何制作动态表单
在angularjs中使用$http实现异步上传Excel文件方法
通过vuejs如何实现数据驱动视图原理
js 图片压缩插件image-conversion使用
npm i image-conversion --se
import as imageConversion from 'image-conversion'
js压缩图片 到固定像素以内，500k为例
本文旨在探究js压缩图片的两种方式： 改变图片长宽 ， 改变图片质量 ，和结合了以上两者的 终方案 。
首先，阅读本文需要知道canvas的两个方法
这两个方法具体的说明可以在MDN上查看，关于图片压缩，也有很多现成的博客可以直接用。但是那些博客都有个问题，并没有关心之后图片的压缩质量。
我试着用一个现成的例子去跑了一下，一个1.7M的图片压缩到了23k，堪称像素级毁灭性破坏。
假如一张大图可能包含着很多文字等关键信息，必须上传之后使用方能清晰辨认。所以要压缩之后质量尽可能接近500k的。500k像素以内，就是若一张图宽度为1024，则高度不能超过500。因为图片有其他的信息，也是要占大小的。即不得大于 1024500 。
所以，根据需求，上传图片不能超过500k的情况下尽可能保留图片的清晰度。当然如果可以的情况下用上面提到的 canvas.toDataURL 设置压缩程度为0.9，0.8试试看，图片质量可以接受，大小会有大幅度的缩小。
如果不压缩，靠调整图片长宽去控制上传大小呢？
原理很简单，就是靠不断地缩小限定的宽高，直到终长宽的积小于规定的大小。
这种方法有可能得出的图片的大小会略大于规定大小，原因上文也提到过了，如果想使用这种方法，可自行再调整一下。
上面的方法有个问题，就是改变了图片的原始长宽。如果一个图的长宽足够大，压缩图片质量，糊一点但是内容看得清也是ok的嘛。所以，跟上面同理，我们可以不断调整图片的质量设定直到大小合适，那么，如何在图片上传之前知道图片的大小呢？
首先，需要知道的一点是，压缩之后拿到的base64字符串会转成blob对象，然后传给服务端。
可以查阅文档，blob对象有个属性是size
这个size就是上传之后实际的文件大小。
参照上面的思路，可以每次改变 canvas.toDataURL('image/' + fileType, level); level的值，去调整压缩图片质量，然后用blob对象的size去验证是否满足500k以内的需求。
关于 canvas.toDataURL 的level到底是怎么计算的，MDN文档里也没说，写了个循环一次减少0.1的level压缩了几个图片
用加减乘除算了一下，没找到规律，数学不好放弃了（这个东西好像也不是能观察出来的，看结果跟初始大小没啥关系）。
这里要注意的是，有可能遇到超大图片，0.1的level可能不足以压缩到500k，所以小于0.1的时候，改变level递减的值继续压缩下去
在开始接收到图片的时候给一个loading增加用户的耐心好了，loading万岁~
其实单纯的压缩质量遇到稍大的图片，会导致页面高频计算，然后页面基本就用不了了- -。有尝试过用iphone的一个屏幕截图（10M左右），压的时候稍过一会，整个手机都在发烫，只能杀进程。
所以，若对长度没有特殊的限制，可以做一个缩放，去加快压缩的进度，提高能压缩的图片大小上限。
页面到了ios上还是不行- -，可以看到图片level为0.001，长边为764。
问题还是循环次数还是过多，计算频率太高。从图中可看出，对于大图来说，初始设定的level和图片尺寸过于宽松，可以优化一下初始level和尺寸。
有的时候还会遇到一张图片无论如何也压不到500k，就是上一次和这次的压缩后大小没有变化，这种情况需要抛错，不让循环继续。
大图片的等待时间稍长，可以给用户先预览一个base64的图片增加等待耐心，方法名为 getImgBase64 ,这里都一并给出了
解决的隐患：上面这个方案会出现我需要一个500k的照片，压到了520k之后，再压了一次。有时候这的一次会特别夸张，直接将图片弄到了几十k。
参考了：
这个库里面有个方法 compressAccurately ,这个方法可以比较精准地压缩。偷偷翻了一下源码。
其实上一个方案的痛点就在于，如何在每一个压缩循环里处理尺寸和压缩比例。
总结
如有纰漏，欢迎指正
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至836084111@qq.com 举报，一经查实，本站将立刻删除。