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()----如果传入的是数字,表示图片质量;如果传入的是对象,表示将参数传递给imagetoCanvasdataURLtoFile方法

    例子:

    // 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);如果传入的是对象,表示将参数传递给imagetoCanvasdataURLtoFile方法

    例子:

      // 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

 

原文地址:https://www.cnblogs.com/wuqilang/p/11847902.html

时间: 2024-10-14 17:09:17

JS通过指定大小来压缩图片的相关文章

JS使用canvas操作、压缩图片

1.使用input标签添加图片文件. <input type="file" name="upload_photo" id="upload_photo" accept="image/jpg,image/jpeg,image/png" value='upload now'>//使用accept限定文件类型 2.监听input的change事件,获取文件内容 $('#upload_photo').on('change',

用gulp-imageisux智图api压缩图片

? 智图平台是什么? 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式.同时,智图平台还会为用户转换一份webp格式的图片. ? 如何使用智图平台? 您只需要将要优化的图片拉至首页的拖拽区域后,系统会自动上传图片并经过智图压缩,返回新的图片.您也可以根据自己的实际使用情况选择不同的压缩率. ? 智图好在哪里? 智图能够自动为您选择压缩率压缩并且在合适的情况下为您选择正确的图片

压缩图片操作和生成圆形图片

1.对本地相册库或相机拍摄下来的图片进行压缩处理,传进来的参数分别有:要压缩的图片和压缩后的大小. //压缩图片 + (UIImage*)imageWithImageSimple:(UIImage*)image scaledToSize:(CGSize)newSize { // Create a graphics image context UIGraphicsBeginImageContext(newSize); // Tell the old image to draw in this ne

压缩图片大小至指定Kb以下

像PS,QQ影像等都有该功能,将图片大小压缩至指定kb以下. 我也来山寨一把,到目前为止,控制图片的大小,平时的解决方案通过分辨率和质量来控制的. 假定最后压缩的大小是100kb,那么在保证不大于100kb的前提下,图片质量尽可能高.图片质量越高,图片占用大小就越大.但是大小与质量的关系,没有一个固定的公式,如y= nx 之类的,而且我也试过将win7系统的图片收藏夹的图,每一张保存10次,从质量为10,递增到100,发现只能得出之前的结论,图片质量高,占用大小就大. 既然这样,那只能找到满足1

C# 压缩图片到指定宽度,假如图片小于指定宽度 判断图片大小是否大于指定大小(KB) 如果大于则压缩图片质量 宽高不变

class Program { static void Main(string[] args) {//G:\zhyue\backup\projects\Test\ConsoleApplication1\img //var url = "http://seo.jrechina.com/houselist/"; //var res = WebRequestExt.GetData(url); string img_url = @"D:\Documents\Pictures\壁纸\1

Java - MultipartFile图片上传服务器,并且指定大小压缩

1 /*** 2 * 上传图片到服务器 并压缩 3 * 4 * @param myFile 文件 5 * @param request 6 * @return 7 */ 8 private Boolean UploadFile(MultipartFile myFile, int width, int height, HttpServletRequest request) { 9 Boolean sta = false; 10 InputStream is = null; 11 FileOutpu

iOS压缩图片大小

最近碰到一个比较愚蠢的问题,项目中做的拍照或者从相册选择图片上传时,没有经过处理,直接把原图上传了,导致在列表中看的时候,明明是小图片流量却要爆炸了,想想iphone拍出照片大小可都是以M为单位的.所以赶紧做了下压缩处理再上传.为了方便根据不同压缩需求调用,这里采用调用可修改参数的方法的做法,更加灵活一点.调用的方法如下: //图片伸缩到指定大小 - (UIImage*)imageByScalingAndCroppingForSize:(CGSize)targetSize forImage:(U

处理页面载入图片js(等比例压缩图片)

第一页面html  <div class="admin">${answer.content}</div> <div class="adminss">${answer.content}</div> 第二循环压缩${answer.content}内容中的大图片 <script> jQuery(function(){ setTimeout('imgLoad()'1000)//延长载入一分钟 }); functio

js压缩图片base64长度

1 var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); 2 (function (base64){ 3 var image = new Image(),newBase64,MAX_HEIGHT = 160; 4 image.onload = function(){ 5 var canvas = document.getElementById("myCanvas"); 6 if(image.heig