评论

使用canvas对图片进行压缩H5

上传文件时往往会遇到图片太大通讯压力太大的问题,这时候可以使用canvas压缩下图片,以上是H5页面方法,小程序有类似方法

//压缩

        var img = new Image();

        img.src = result;

        // 如果图片大小小于200kb,则直接上传

        if (result.length <= 200) {

          //ajaxUpload(result, file.type, file.name); // 调用上传接口函数

          img = null;

          return;

        }

        // 图片加载完毕之后进行压缩,然后上传

        if (img.complete) {

          callback();

        } else {

          img.onload = callback;

        }

        function callback () {

          var data = compress(img);

          console.log(data)

          //alert(data)

          showResult.innerHTML = '<img src="'+data+'" alt=""/>'

          // 文件上传

          //ajaxUpload(data, file.type, file.name);

          img = null;

        }



  /**

   * 使用canvas对大图片进行压缩

   * @param {img} 图片

   */

function compress (img) {

    // 用于压缩图片的canvas

    var canvas = document.createElement('canvas');

    var ctx = canvas.getContext('2d');

    // 瓦片canvas

    var tCanvas = document.createElement('canvas');

    var tctx = tCanvas.getContext('2d');

    // let 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 = '#000';

    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 (let i = 0; i < count; i++) {

        for (let 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.1);

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

}

最后一次编辑于  2020-03-10  
点赞 0
收藏
评论
登录 后发表内容