JS通过指定大小来压缩图片
安装:
npm i image-conversion --save 引入:
<script src="https://cdn.jsdelivr.net/gh/WangYuLue/image-conversion/build/conversion.js"></script>
or
const imageConversion = require("image-conversion") 用例:
<input id="demo" type="file" onchange="view()">
一、将图像压缩到200kb
function view(){
const file = document.getElementById('demo').files[0];
console.log(file);
imageConversion.compressAccurately(file,200).then(res=>{
//The res in the promise is a compressed Blob type (which can be treated as a File type) file;
console.log(res);
})
} // or use an async function
async function view() {
const file = document.getElementById('demo').files[0];
console.log(file);
const res = await imageConversion.compressAccurately(file,200)
console.log(res);
}
二、图像精度0.9
function view(){
const file = document.getElementById('demo').files[0];
console.log(file);
imageConversion.compress(file,0.9).then(res=>{
console.log(res);
})
}
imageConversion的一些方法:
①imagetoCanvas()----缩放和旋转图片
例子:
imageConversion.imagetoCanvas(image); //or imageConversion.imagetoCanvas(image,{
width: 300, //result image's width
height: 200, //result image's height
orientation:2,//image rotation direction
scale: 0.5, //the zoom ratio relative to the original image, range 0-10;
//Setting config.scale will override the settings of
//config.width and config.height;
})
②dataURLtoFile()----确定转换后的图像类型:“Image/png”、“Image/jpeg”、“Image/gif”
③compress()----如果传入的是数字,表示图片质量;如果传入的是对象,表示将参数传递给
imagetoCanvas
和dataURLtoFile
方法
例子:
// number
imageConversion.compress(file,0.8) //or // object
imageConversion.compress(file,{
quality: 0.8,
type: "image/jpeg",//如果压缩PNG透明图像,请选择“Image/png”类型
width: 300,
height: 200,
orientation:2,
scale: 0.5,
})
④compressAccurately()----如果是传入的是数字,表示指定压缩后图像的大小(KB);如果传入的是对象,表示将参数传递给
imagetoCanvas
和dataURLtoFile
方法
例子:
// number
imageConversion.compressAccurately(file,100); //The compressed image size is 100kb
// object
imageConversion.compressAccurately(file,{
size: 100, //The compressed image size is 100kb
accuracy: 0.9,//the accuracy of image compression size,range 0.8-0.99,default 0.95;
//this means if the picture size is set to 1000Kb and the
//accuracy is 0.9, the image with the compression result
//of 900Kb-1100Kb is considered acceptable;
type: "image/jpeg",
width: 300,
height: 200,
orientation:2,
scale: 0.5,
})
参考:GitHub
图片转换工具:http://www.wangyulue.com/assets/image-comversion/example/index.html
JS通过指定大小来压缩图片的更多相关文章
- GIF图片裁剪出指定大小的GIF图片
前言 最近在博客后台上传图片的时候,突然发现上传gif图片的时候裁剪图片有问题.既没法裁剪gif指定区域的图片,又没法裁剪指定区域生成一个新的指定大小的gif图.本来想直接去找个裁剪的库直接放上去的, ...
- gulpfile.js(编译sass,压缩图片,自动刷新浏览器)
var gulp = require('gulp'), sass = require('gulp-sass'), watch = require('gulp-watch'), ...
- js使用canvas在前端压缩图片
HTML代码: <input id="file" type="file"> JS代码: var eleFile = document.querySe ...
- 用gulp-imageisux智图api压缩图片
➣ 智图平台是什么? 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式.同时, ...
- 等比例压缩图片到指定的KB大小
基本原理: 取原来的图片,长宽乘以比例,重新生成一张图片,获取这张图片的大小,如果还是超过预期大小,继续在此基础上乘以压缩比例,生成图片,直到达到预期 /** * @获取远程图片的体积大小 单位byt ...
- C# 图片超过指定大小将压缩到指定大小不失真
using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;us ...
- iOS学习——图片压缩到指定大小以内
一.图片压缩简述 在我们开发过程中,有可能会遇到拍照.或者从相册中选择图片,要么单选或者多选,然后上传图片到服务器,一般情况下一张图片可能3-4M,如果类似微信朋友圈上传9张图片大约是 35M左右,如 ...
- C# 压缩图片到指定宽度,假如图片小于指定宽度 判断图片大小是否大于指定大小(KB) 如果大于则压缩图片质量 宽高不变
class Program { static void Main(string[] args) {//G:\zhyue\backup\projects\Test\ConsoleApplication1 ...
- 【问题帖】压缩图片大小至指定Kb以下
像PS,QQ影像等都有该功能,将图片大小压缩至指定kb以下. 我也来山寨一把,到目前为止,控制图片的大小,平时的解决方案通过分辨率和质量来控制的. 假定最后压缩的大小是100kb,那么在保证不大于10 ...
随机推荐
- CodeForce 577B Modulo Sum
You are given a sequence of numbers a1, a2, ..., an, and a number m. Check if it is possible to choo ...
- RocketMQ多master多salve集群搭建
一.RocketMQ集群模式简介 单Master方式 风险比较大, 一旦Broker重启或者宕机, 将导致整个环境不可用, 不建议线上使用. 多Master模式 一个集群中没有slave, 全是mas ...
- Redis学习记录及Jedis代码示例
文章目录 二.Redis简介 三.Redis安装 1. 下载并解压安装 2. 安装C语言编译环境 3. 修改安装位置 4. 编译安装 5.启动Redis服务器 ①默认启动 ②定制配置项启动 [1]准备 ...
- 车位iou计算
车位检测中,判断多帧图像检测出的车位是否是同一个车位.计算其IOU. 判断一个点是否在一个四边形内 Approach : Let the coordinates of four corners be ...
- mysql快速安装教程详解
Mysql 一.在https://www.cnblogs.com/zyx110/p/10799387.html中下载如下图中的压缩包 二.将mysql压缩包解压至c盘根目录下 三.把配置文件中的东西复 ...
- C# 人民币大写金额转换
/// <summary> /// 转换人民币大小金额 /// </summary> /// <param name="nu ...
- Navicat for Mysql安装及破解教程
一.Navicat for Mysql安装 下载链接:https://navicatformysql.en.softonic.com/ 点击download下载. 下载完成后双击安装 二.破解 破解工 ...
- C/C++中new的使用规则
本人未重视new与指针的使用,终于,终于在前一天船翻了,而且没有爬上岸: 故此,今特来补全new的用法,及其一些规则: 话不多说 C++提供了一种“动态内存分配”机制,使得程序可以在运行期间,根据实际 ...
- deepin把vscode设为默认文本应用
一开始我想自己写一个desktop文件放在/usr/share/applications下面,结果在右键菜单里面找不到vscode. [Desktop Entry] Categories=Develo ...
- 把本地项目提交到GIT上
1.init之前 1.1 新建.gitignore文件 在提交之前.gitignore文件会把文件里面包含的内容都忽略掉 node_modules // webstorm里面的配置,别人不一定用 .i ...