精华内容
参与话题
问答
  • js图片压缩

    2021-01-19 17:24:28
    js图片压缩 compressImg (base64, scale, callback) { console.log(`执行缩放程序,scale=${scale}`); // 处理缩放,转换格式 // 下面的注释就不写了,就是new 一个图片,用canvas来压缩 const img = new Image...

    js图片压缩

    compressImg (base64, scale, callback) {
            console.log(`执行缩放程序,scale=${scale}`);
    
            // 处理缩放,转换格式
            // 下面的注释就不写了,就是new 一个图片,用canvas来压缩
            const img = new Image()
            img.src = base64
            img.onload = function () {
              const canvas = document.createElement('canvas')
              const ctx = canvas.getContext('2d')
              canvas.setAttribute('width', this.width)
              canvas.setAttribute('height', this.height)
              ctx.clearRect(0, 0, canvas.width, canvas.height)
              ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
              // 转成base64 文件
              let base64 = canvas.toDataURL('image/jpeg')
              // 根据自己需求填写大小 我的目标是小于4兆
              while (base64.length > 1024 * 1024 * 4) {
                scale -= 0.01
                base64 = canvas.toDataURL('image/jpeg', scale)
              }
              // baser64 TO blob 这一块如果不懂可以自行百度,我就不加注释了
              const arr = base64.split(',')
              const mime = arr[0].match(/:(.*?);/)[1]
              const bytes = atob(arr[1])
              const bytesLength = bytes.length
              const u8arr = new Uint8Array(bytesLength)
              for (let i = 0; i < bytes.length; i++) {
                u8arr[i] = bytes.charCodeAt(i)
              }
              const blob = new Blob([u8arr], { type: mime })
              // 回调函数 根据需求返回二进制数据或者base64数据,我的项目都给返回了
              callback(blob, base64,canvas.width,canvas.height)
            }
          },
    
    展开全文
  • JS 图片压缩

    2020-06-17 11:03:05
    例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码...

    说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?当然可以,那我们先来理一下思路。

     

    压缩思路

    涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下:

    • 获取上传 Input 中的图片对象 File
    • 将图片转换成 base64 格式
    • base64 编码的图片通过 Canvas 转换压缩,这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api,一个调节图片的分辨率的,一个是调节图片压缩质量并且输出的,后续会有详细介绍
    • 转换后的图片生成对应的新图片,然后输出

     

    优缺点介绍

    不过 Canvas 压缩的方式也有着自己的优缺点:

    • 优点:实现简单,参数可以配置化,自定义图片的尺寸,指定区域裁剪等等。
    • 缺点:只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果,其他图片格式,仅能通过调节尺寸来实现

     

    代码实现

    <template>
      <div class="container">
        <input type="file" id="input-img" @change="compress" />
        <a :download="fileName" :href="compressImg" >普通下载</a>
        <button @click="downloadImg">兼容 IE 下载</button>
        <div>
          <img :src="compressImg" />
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'compress',
      data: function() {
        return {
          compressImg: null,
          fileName: null,
        };
      },
      components: {},
      methods: {
        compress() {
          // 获取文件对象
          const fileObj = document.querySelector('#input-img').files[0];
          // 获取文件名称,后续下载重命名
          this.fileName = `${new Date().getTime()}-${fileObj.name}`;
          // 获取文件后缀名
          const fileNames = fileObj.name.split('.');
          const type = fileNames[fileNames.length-1];
          // 压缩图片
          this.handleCompressImage(fileObj, type);
        },
        handleCompressImage(img, type) {
          const vm = this;
          let reader = new FileReader();
          // 读取文件
          reader.readAsDataURL(img);
          reader.onload = function(e) {
            let image = new Image(); //新建一个img标签
            image.src = e.target.result;
            image.onload = function() {
              let canvas = document.createElement('canvas');
              let context = canvas.getContext('2d');
              // 定义 canvas 大小,也就是压缩后下载的图片大小
              let imageWidth = image.width; //压缩后图片的大小
              let imageHeight = image.height;
              canvas.width = imageWidth;
              canvas.height = imageHeight;
              
              // 图片不压缩,全部加载展示
              context.drawImage(image, 0, 0);
              // 图片按压缩尺寸载入
              // let imageWidth = 500; //压缩后图片的大小
              // let imageHeight = 200;
              // context.drawImage(image, 0, 0, 500, 200);
              // 图片去截取指定位置载入
              // context.drawImage(image,100, 100, 100, 100, 0, 0, imageWidth, imageHeight);
              vm.compressImg = canvas.toDataURL(`image/${type}`);
            };
          };
        },
        // base64 图片转 blob 后下载
        downloadImg() {
          let parts = this.compressImg.split(';base64,');
          let contentType = parts[0].split(':')[1];
          let raw = window.atob(parts[1]);
          let rawLength = raw.length;
          let uInt8Array = new Uint8Array(rawLength);
          for(let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
          }
          const blob = new Blob([uInt8Array], {type: contentType});
          this.compressImg = URL.createObjectURL(blob);
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容 ie 的下载方式
            window.navigator.msSaveOrOpenBlob(blob, this.fileName);
          }else{
            const a = document.createElement('a');
            a.href = this.compressImg;
            a.setAttribute('download', this.fileName);
            a.click();
          }
        },
      }
    };
    </script>
    展开全文
  • JS图片压缩

    2019-10-02 08:39:59
    * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象 有 width, height, ...
    /**
     * 图片压缩,默认同比例压缩
     * @param {Object} path    
     *         pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
     * @param {Object} obj
     *         obj 对象 有 width, height, quality(0-1)
     * @param {Object} callback
     *         回调函数有一个参数,base64的字符串数据
     */
    function dealImage(path, obj, callback){
        var img = new Image();
        img.src = path;
        img.onload = function(){
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
            var quality = 0.7;        // 默认图片质量为0.7
            
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
                  
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小,所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality );
            // 回调函数返回base64的值
            callback(base64);
        }
    }
    
    // 调用函数处理图片                 
    dealImage("路径", {
    // 注意:在pc端可以用绝对路径或相对路径,移动端最好用绝对路径(因为用take photo后的图片路径,我没有试成功(如果有人试成功了可以分享一下经验))
      width : 200
    }, function(base){
    //直接将获取到的base64的字符串,放到一个image标签中就可看到测试后的压缩之后的样式图了
      document.getElementById("transform").src = base;
      console.log("压缩后:" + base.length / 1024 + "  " + base);    
    })
    

      PS:获取到图片,利用H5 canvas技术进行图片数据化为 base64 的字符串,最后传到后台进行,后台将base64的字符串数据进行图像化储存。

    转载于:https://www.cnblogs.com/hejianrong/p/6423992.html

    展开全文
  • js 图片压缩

    2020-04-22 11:25:17
    //压缩方法 function compress(img) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); var tCanvas = document.createElement("canvas"); ...
      //压缩方法
        function compress(img) {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext('2d');
            var tCanvas = document.createElement("canvas");
            var tctx = tCanvas.getContext("2d");
    
    
            var initSize = img.src.length;
            var width = img.width;
            var height = img.height;
    
            //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
            var ratio;
            if ((ratio = width * height / 4000000)>1) {
                ratio = Math.sqrt(ratio);
                width /= ratio;
                height /= ratio;
            }else {
                ratio = 1;
            }
    
            canvas.width = width;
            canvas.height = height;
    
    //        铺底色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
    
            //如果图片像素大于100万则使用瓦片绘制
            var count;
            if ((count = width * height / 1000000) > 1) {
                count = ~~(Math.sqrt(count)+1); //计算要分成多少块瓦片
    
    //            计算每块瓦片的宽和高
                var nw = ~~(width / count);
                var nh = ~~(height / count);
    
                tCanvas.width = nw;
                tCanvas.height = nh;
    
                for (var i = 0; i < count; i++) {
                    for (var j = 0; j < count; j++) {
                        tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
    
                        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                    }
                }
            } else {
                ctx.drawImage(img, 0, 0, width, height);
            }
    
            //进行最小压缩
            var ndata = canvas.toDataURL('image/jpeg', 0.6);
    
            console.log('压缩前:' + initSize);
            console.log('压缩后:' + ndata.length);
            console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
    
            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
    
            return ndata;
        }

     

    展开全文
  • js 图片压缩

    2018-08-26 23:44:26
    imgToLessen = (url,defaultWidth)=&gt;{ //建一个画布 let cvs = document.createElement('canvas'); let ctx = cvs.getContext('2d'); let img = new window.Image(); img.src...
  • js图片压缩推荐

    2020-10-26 19:25:59
    1. irz图片压缩 图片压缩:不能定义压缩后大小 2. image-conversion 图片压缩:能定义压缩后大小 js图片压缩推荐
  • 主要介绍了JS 图片压缩原理与实现方法,结合实例形式详细分析了JS 图片压缩原理、实现方法与操作注意事项,需要的朋友可以参考下
  • vue前端图片压缩,js图片压缩技术 公司项目有拍照上传图片,现在一般手机拍照都会有4M,5M样子,四五兆的图片上传到服务器就卡卡卡,最后失败!我的天啦,容我吐槽下这服务器! 肿么办?只能前端压缩呗,总不能跟客户...
  • 一个简单易用的JS图片压缩方法
  • 1.运用 canvas 实现 图片上传压缩 2.包含 将图片转为Base64位 以及转为Blob对象
  • js图片压缩插件

    2017-06-30 17:11:46
    现在手机拍照因为图片太大,导致上传很慢,可以通过js压缩图片大小后再上传,此插件可以压缩图片大小

空空如也

1 2 3 4 5 ... 20
收藏数 3,495
精华内容 1,398
关键字:

js图片压缩